如何防止在将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');