如何降低Html2Canvas中的图像质量

时间:2016-03-08 11:57:45

标签: javascript jquery jspdf html2canvas

在将所有内容导出为PDF之前,我想降低图像质量。如果文档在PDF中超过3到6页,则其文件大小会大幅增加(获得高质量图像), ~40 MB 。我希望缩小文件大小,比如压缩文件。是否有任何属性需要在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%');
}

});

0 个答案:

没有答案