web-dev-qa-db-ja.com

キャンバスをjpgとしてデスクトップに保存します

HTML5canvasからデスクトップに画像（JPEG）を保存しようとしています。新しいウィンドウwindow.open(canvas.toDataURL('png'), "");で開くことができますが、デスクトップに保存するにはどうすればよいですか？ありがとう。

javascripthtml5canvashtml5-canvas
21
Rajkamal

ダウンロード属性

HTML5には、リンクのファイル名を指定できる新しい ダウンロード属性 があります。

これは、キャンバスを保存するために作成しました。リンクがあります（「イメージとしてダウンロード」）-

<a id="downloadLnk" download="YourFileName.jpg">Download as image</a>

そして機能：

function download() {
    var dt = canvas.toDataURL('image/jpeg');
    this.href = dt;
};
downloadLnk.addEventListener('click', download, false);

属性downloadLnk.download = 'myFilename.jpg'を設定して、ファイル名を動的に変更することもできます。

デモアーカイブから。

48
user1693593

役立つ場合はこれを確認してください。同じ要件に実装されたjsfiddle。 http://jsfiddle.net/5whKM/

<img src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7"/>

<script>
  var img = document.images[0];
  img.onclick = function() {
    var url = img.src.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
    location.href = url;
  };
</script>
8
Ashish Chopra

この場合にすべきことは、ユーザーwindow.location=canvas.toDataURL('png')を「ダウンロード」させたいファイルの場所に送信することです。したがって、新しいウィンドウを開くというソリューションは、あなたがすべきことであり、「ダウンロード」とは何かです。

たとえば、ファイルのEXEを保存する場合は、アンカーをクリックするだけで、ブラウザはファイルの要求とダウンロードを処理します。 JavaScriptを使用してそれを行うこともできますが、ユーザーのSaveAsをポップするだけではセキュリティとユーザーエクスペリエンスの問題です。

また、これを確認してください： Browser/HTML src = "data：image/jpeg; base64 ..."からのイメージの強制ダウンロード

2
Mzn