web-dev-qa-db-ja.com

javascript変数からpngを保存する方法

Javascript変数でbase64にエンコードされた画像があります：data:image/png;base64, base64 data

[編集]訪問者に右クリックを要求せずにそのファイルをディスクに保存する必要があります[/編集]

出来ますか ？どうやって ？

前もって感謝します

宜しくお願いします

javascriptimagesave
21
hotips

この質問は2年前のものですが、このアップデートが表示されることを願っています。

ユーザーに右クリックを要求せずに、base64文字列で画像を保存するようにユーザーに促す（およびファイル名を設定する）ことができます

var download = document.createElement('a');
download.href = dataURI;
download.download = filename;
download.click();

例：

var download = document.createElement('a');
download.href = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
download.download = 'reddot.png';
download.click();

Firefoxを使用してクリックイベントをトリガーするには、 this SO answer 。基本的に：）で説明されていることを実行する必要があります。

function fireEvent(obj,evt){
  var fireOnThis = obj;
  if(document.createEvent ) {
    var evObj = document.createEvent('MouseEvents');
    evObj.initEvent( evt, true, false );
    fireOnThis.dispatchEvent( evObj );
  } else if( document.createEventObject ) {
    var evObj = document.createEventObject();
    fireOnThis.fireEvent( 'on' + evt, evObj );
  }
}
fireEvent(download, 'click')

2013年3月20日の時点で、download属性を完全にサポートしているブラウザはChromeのみです。 ここで互換性テーブルを確認してください

35
davoclavo

...訪問者に何も聞かずに...それは可能ですか？

いいえ、それはセキュリティホールだったでしょう。可能であれば、エンドユーザーのディスクにマルウェアを無断で書き込むことができます。あなたの最善の策は（署名された） Javaアプレット かもしれません。確かに、署名を取得するには（セキュリティ警告が表示されないように）少し$$$かかりますが、許可なくエンドユーザーのディスクにデータを書き込むことができます。

6
BalusC

ここで、HTML5BLOBをいくつかのNiceライブラリと一緒に使用することに言及している人がいないことに驚いています。

最初に必要なのは https://github.com/eligrey/FileSaver.js/ および https://github.com/blueimp/JavaScript-Canvas-to-Blob です。

次に、画像をキャンバスにロードできます

base_image = new Image();
base_image.src ='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';

キャンバスをブロブに

var canvas = document.getElementById('YourCanvas');
context = canvas.getContext('2d');
// Draw image within
context.drawImage(base_image, 0,0);

そして最後にそれを保存します

x_canvas.toBlob(function(blob) {
saveAs(blob, "screenshot.png");
}, "image/png");

FFは完全にはサポートされていませんが、少なくとも画像を含む別のページが表示されます。

これをチェックしてください： http://jsfiddle.net/khhmm/9/

編集：これはSafari/Macと互換性がありません。

6
malber

他の回答がすでに述べたように、JavaScriptだけでそれを行うことはできません。必要に応じて、データを（通常のHTTP POSTを使用して）PHPスクリプトに送信し、header('Content-type: image/png')を呼び出し、echo base64_decode($base64data)。

これは、ユーザーが画像をクリックして開くか、ファイルをディスクに保存するように求める（通常のブラウザのファイル保存ダイアログ）のと同じように機能します。

3
user323094

不可能です。

もしそうなら、ブラウザは非常に安全ではなく、ユーザーの操作なしにランダムなデータをハードディスクに書き込むことができます。

2
jvenema

javascriptではできません。私が考えることができる唯一の本当の可能性はJavaアプレットですが、おそらく（その画像をどのくらいの期間保存する必要があるかわかりません）、pngと強​​制キャッシュ（ただし、ユーザーがキャッシュを削除すると、画像は失われます）。

1
oezi

このファイルをサーバー上でblobとして作成し、setTimeout関数を使用してダウンロードを起動できます。

0
Footer

私はあなたがそれを何かできると思います（多分javascript ... xulプログラミングが必要なだけではありません）。画像をフォルダに保存するFirefoxアドオンがあります（Firefoxアドオンサイトを確認してください）

0
ionutcib