HTML2canvas、filesaver.js、および canvas2blob.js を使用して、ブラウザ内の保存ダイアログを実現しています。オンザフライのキャンバス作成と保存は、画像の背景が黒であることを除いて正常に機能します。
問題は、id="drop1" を持つ div の base64 でエンコードされたイメージです (ユーザーがデスクトップから html にイメージをドラッグ アンド ドロップすると、そのイメージが base64 として背景として配置されます)。
どうすればpngファイルで目に見える出力を達成できますか?
私のJS:
// save img magic
// html2canvas.js linked with filesaver.js and canvas2blob.js for compatibility polyfilling
$('#1stSave').click(function() {
var html2obj = html2canvas($('#drop1'));
var queue = html2obj.parse();
var canvas = html2obj.render(queue);
canvas.toBlob(function(blob) {
saveAs(blob, "teaser-384x168px.png");
});
});
事前にどうもありがとう:)