Javascript 如何在Html2Canvas中降低图像质量

在将所有内容导出为PDF之前，我想降低图像质量。如果文档在PDF中的跨度超过3到6页，其文件大小将大幅增加（获得非常高质量的图像，~40MB）。我想要减小文件大小，比如压缩文件。对于压缩文件大小，Html2Cavans中是否需要设置任何属性

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

    // pageHeight= doc.internal.pageSize.height;
    var image = new Image();
    image = Canvas2Image.convertToPNG(canvas);
    doc.addImage(img, 'PNG', 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.convertToPNG(canvas1);
        var image2Data = image2.src;
        doc.addImage(image2Data, 'PNG', 12, 15);
        croppingYPosition += destHeight;
    }
    doc.save('firstPDF.pdf');
    $('.pdfTemplates').css('width', '100%');
}

html2canvas（表格、{
图像超时：2000，
removeContainer：是的，
onrendered：函数（画布）{
var img=canvas.toDataURL（“image/png”）；
var doc=新的jsPDF({
单位：'pt'，
格式：“a4”，
});
//pageHeight=doc.internal.pageSize.height；
var image=新图像（）；
image=Canvas2Image.convertToPNG（画布）；
addImage文件（img，'PNG'，12,15）；
var corte=（vm.a4[1]*1.33333）-30；
var cropingyposition=corte；
变量计数=（image.height）/corte；
对于（变量i=1；i

---

}))

如图所示的代码片段只是创建canvas元素。您是如何从中获取图像数据的？我已更新了查询，请查看。您只能指定有损图像格式的质量，如image/jpeg或image/webp–不适用于PNG。那么，通过将其转换为JPEG，我会缩小尺寸吗？当我把它转换成JPEG时，还有一个问题。PDF中显示没有数据的黑色背景。如何解决这个问题？所以我猜Html2Canvas将透明部分（没有数据的部分）转换为黑色背景。我在网上找到了一些解决方案，建议设置背景：#FFFFFF（不起作用），一个解决方案建议更改我不想要的脚本（Html2Canvas），因为它并不总是可能的。那正确的做法是什么呢？