將HTML的透明部分轉換爲Html2Canvas中的白色

我使用Html2Canvas將文檔導出爲PDF，但它將JPEG的透明部分轉換爲黑色（我知道它應該如何去除）。但我希望它能夠將透明背景轉換爲白色。在在線解決方案中，建議更改腳本（Html2Canvas或JSPDF），但我不想這樣做，因爲它不總是可行的。達到此目的的最佳方法是什麼？將HTML的透明部分轉換爲Html2Canvas中的白色

html2canvas(form, { 
imageTimeout: 2000, 
removeContainer: true, 
background:'#FFF', 
onrendered: function (canvas) { 
    var img = canvas.toDataURL("image/jpeg"); 
    var doc = new jsPDF({ 
     unit: 'pt', 
     format: 'a4', 
    }); 

    // pageHeight= doc.internal.pageSize.height; 
    var image = new Image(); 
    image = Canvas2Image.convertToJPEG(canvas); 
    doc.addImage(img, 'JPEG', 12, 15); 
    var corte = (vm.a4[1] * 1.33333) - 30; 
    var croppingYPosition = corte; 
    var count = (image.height)/corte; 
    for (var i = 1; i < count; i++) { 
     doc.addPage(); 
     var sourceX = 0; 
     var sourceY = croppingYPosition; 
     var sourceWidth = image.width; 
     var sourceHeight = corte; 
     var destWidth = sourceWidth; 
     var destHeight = sourceHeight; 
     var destX = 0; 
     var destY = 0; 
     var canvas1 = canvas; 
     canvas1.setAttribute('height', corte * i); 
     canvas1.setAttribute('width', destWidth); 
     var ctx = canvas1.getContext("2d"); 
     ctx.drawImage(image, sourceX, 
          sourceY, 
          sourceWidth, 
          sourceHeight, 
          destX, 
          destY, 
          destWidth, 
          destHeight); 
     var image2 = new Image(); 
     image2 = Canvas2Image.convertToJPEG(canvas1); 
     var image2Data = image2.src; 
     doc.addImage(image2Data, 'JPEG', 12, 15); 
     croppingYPosition += destHeight; 
    } 
    doc.save('firstPDF.pdf'); 
    $('.pdfTemplates').css('width', '100%'); 
}

}）;

來源

2016-03-08 Rishabh Sharma

從來沒有真正使用過Canvas2Image，但這裏有一個黑客可以嘗試。

步驟1：代替

convertToJPEG（畫布）

做

Canvas2Image.convertToPNG（畫布）

PNG應該理想地保留透明度。

第2步：現在你可以繪製圖像投影到白色的畫布，從而其結果將是帶有白色背景的JPEG

ctx.fillStyle = "#ffffff"; 
ctx.fillRect(0,0,canvas1.width,canvas1.height); 
ctx.drawImage(image, sourceX, 
        sourceY, 
        sourceWidth, 
        sourceHeight, 
        destX, 
        destY, 
        destWidth, 
        destHeight);

來源

2016-03-08 14:22:24 Anubhab

感謝答覆Anubhab。但我不是單獨拾取圖像並將它們放入PDF中。我已經將這個已經呈現的頁面擴展到PDF上的4個頁面，並且圖表在任何地方都可以顯示。如果我使用convertToPNG（canvas），PDF的文件大小會急劇增加〜30 MB，我肯定不希望這種行爲。因此，我僅使用JPEG（縮小文件大小）並尋找解決方法。 –

毫無疑問convertToPNG會給我白色背景，但它會增加我的文件大小。我正在尋找解決方法，它可以幫助我將此畫布轉換爲JPEG格式，甚至具有白色背景（無論透明度如何）。 –

哦，你是正確的大小！我的錯。嘿，你能上傳一個當前輸出的樣本嗎？我有另一個黑客的想法，但需要看看你的當前輸出是否可能。 – Anubhab

將HTML的透明部分轉換爲Html2Canvas中的白色

回答

相關問題