jquery - 将div保存为png时如何防止黑色背景

Question

我正在使用 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");
    });
});

提前非常感谢:)

Answer 1

让它使用不同的语法：

   html2canvas($('#drop1'), {
     onrendered: function(canvas) {
            var img = canvas.toDataURL()
            canvas.toBlob(function(blob) {
            saveAs(blob, "teaser-384x168px.png");
        }, "image/png");
            }
    });

我希望你可以自己使用它。干杯

Answer 2

$('#element').css('background-color','transparent');