将div保存为png时如何防止黑色背景答案

【问题标题】：How to prevent black background when saving a div to png将div保存为png时如何防止黑色背景
【发布时间】：2013-09-30 14:17:00
【问题描述】：

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

提前非常感谢:)

【问题讨论】：

标签： jquery html canvas drag-and-drop base64

【解决方案1】：

让它使用不同的语法：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

抱歉，这不起作用。我尝试使用包含背景图像的元素。