25

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

4

3 に答える 3

51

ダウンロード属性

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'。

アーカイブからのデモ。

于 2013-07-01T06:40:56.140 に答える
8

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

<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>
于 2013-07-01T05:10:07.923 に答える
1

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

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

これもチェックしてください: Browser/HTML Force download of image from src="data:image/jpeg;base64..."

于 2013-07-01T04:25:29.003 に答える