在 Html2Canvas 中将 JPEG 的透明部分转换为白色

Question

我正在使用 Html2Canvas 将文档导出为 PDF，但它会将 JPEG 的透明部分转换为黑色（我知道应该这样）。但我希望它将透明背景转换为白色。在在线解决方案中，建议更改脚本（Html2Canvas 或 JSPDF），但我不想这样做，因为这并不总是可能的。实现这一目标的最佳方法是什么？

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%');
}

});

Answer 1

从未真正使用过 Canvas2Image，但这里有一个你可以尝试的技巧。

1. 第 1 步：代替

convertToJPEG(画布)

做一个

Canvas2Image.convertToPNG(画布)

PNG 应该理想地保留透明度。

1. 第 2 步：现在您可以将图像绘制到白色画布上，从而得到带有白色背景的 JPEG

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