javascript - キャンバスから画像を保存するときに拡張子がありません

Question

このコードを使用して、Javascript で画像を保存します。

window.location.href = grid.toDataURL("image/png").replace("image/png", "image/octet-stream");

コードは機能しますが、保存されたファイルには拡張子がありません。手動で名前を変更する必要があります。

私の質問は、拡張子を最後に付けるにはどうすればよいですか?

ありがとうございました。

Answer 1

toDataURLファイル名ではなく data-uri を生成するため、この場合拡張子は適用されません。

data-uri は、一部のブラウザーがファイルとして読み取ることができるバイナリ コンテンツのテキスト エンコード バージョンです。データ ストリームにはファイル名がないため、添付できません。

この問題を回避するには、次のようにアンカー タグを設定します。

<a id="imageLink" href="data-uri-here" download="myFilename.png">
    Click to download
</a>

JavaScript では、これらの属性を動的に設定できます。

imageLink.href = grid.toDataURL();
imageLink.download = 'myOtherFilename.png';