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

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

Answer 2

使用不同的语法：

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

我希望你能用它来做你自己的。干杯

将div保存到png时如何防止黑色背景

2 个答案: