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