toDataURLイメージのダウンロードには、これが働いている拡張子

Question

のdivを使用することによってクリックされたとき、私は、画像をダウンロードしています...

document.location.href = save_canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream"); 

が、ダウンロードに拡張子がないし、ちょうど「ダウンロード」

と呼ばれているというイメージを持っていません私はこのような名前を設定しようとした

...

document.location.download = "myfile.jpg"; 
document.location.href = save_canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream"); 

しかし、それは何の効果も持っていない、どこで間違ったんですか？

Answer 1

download属性は、というオブジェクトの一部ではなく、HTMLアンカー（A）タグ（IEを除く）のみに属します。

ブラウザとバージョンによっては、代わりにBlobオブジェクトにキャンバスを変換し、次にFileにファイル名を設定して、URL.createObjectURL()でURLとして配信することができます。また、ここではtoBlob()はIEではサポートされていません（ただし、polyfilltoBlob()）。代わりにmsSaveBlobを使用してください。

（そしてあなたもMIMEタイプのための "アプリケーション"（例えば、 "アプリケーション/オクテットストリーム"）とMIMEタイプの "イメージ" を交換したいと思う。）

c.toBlob(function(blob) { 
 
    var file = new File([blob], "test.png", {type: "application/octet-stream"}); 
 
    document.location.href = URL.createObjectURL(file); 
 
})

A save request with PNG and filename should appear when running this code... 
 
<canvas id=c></canvas>

オプションで、多くの特別なケースを扱うFileSaver.js libraryを試してください。