JavaScriptで新しいpngイメージを作成して保存する

Question

新しい空のイメージを幅と高さで作成し、それをファイルに保存しています。

これは私が得たものである：私は、ダウンロードの出力としてvar myImage new Image(200, 200)に与えられた幅と高さの透明画像を取得しようとしています

var myImage = new Image(200, 200); 
myImage.src = 'picture.png'; 


window.URL = window.webkitURL || window.URL; 

var contentType = 'image/png'; 

var pngFile = new Blob([myImage], {type: contentType}); 

var a = document.createElement('a'); 
a.download = 'my.png'; 
a.href = window.URL.createObjectURL(pngFile); 
a.textContent = 'Download PNG'; 

a.dataset.downloadurl = [contentType, a.download, a.href].join(':'); 

document.body.appendChild(a); 

。

Answer 1

イメージ要素は、既存のイメージのみを読み込むことができます。新しいイメージを作成するには、キャンバスを使用する必要があります：

var canvas = document.createElement("canvas"); 

// set desired size of transparent image 
canvas.width = 200; 
canvas.height = 200; 

// extract as new image (data-uri) 
var url = canvas.toDataURL(); 

は今、あなたはA-リンクの url hrefとしてソースを設定することができます。 はMIMEタイプを指定しますが、それ以外の場合は常にデフォルトのPNGになります。あなたはまた、使用してブロブとして抽出することができ

：

// note: this is a asynchronous call 
canvas.toBlob(function(blob) { 
    var url = (URL || webkitURL).createObjectURL(blob); 
    // use url here.. 
}); 

ちょうどそのIEを認識することは、このように、（IEはdownload属性をサポートしていないんどちらもtoBlob()をサポートしていないとpolyfillが必要になります、またはあなたはnavigator.msSaveBlob()を使用することができますIEの場合は1つの石で2羽の鳥を殺す）。

Answer 2

私の質問に返信してくれてありがとうK3Nですが、私はあなたの答えの周りに私の頭を包む時間がありませんでした。

あなたの答えはちょうど私が必要だったものでした！ここで

は、私が得たものである：

var canvas = document.createElement("canvas"); 
 

 
canvas.width = 200; 
 
canvas.height = 200; 
 

 
var url = canvas.toDataURL(); 
 

 
var a = document.createElement('a'); 
 
a.download = 'my.png'; 
 
a.href = url; 
 
a.textContent = 'Download PNG'; 
 

 

 

 
document.body.appendChild(a);