Support image compression in html() function

[ericjames]

Filed Stackoverflow here: https://stackoverflow.com/questions/67753141/jspdf-html-method-doesnt-recognize-the-image-quality-option

Basically something is up with the jsPDF.html() method in which any img element blows up the file size. For me I have a 50kb image that blows up the PDF to 3.3mb with nothing else in it.

So I have to selectively replace those image elements with onclone.

My workaround:

pdf.html(ele, {
    x: 10,
    y: 10,
    image: {
        format: "JPEG", 
        quality: 10, // doesn't affect it
        compression: "FAST" // Doesn't do anything
    },
    html2canvas: {
        onclone: (doc) => {
            // doc returns the entire document, not just ele
            let target = doc.querySelector("#theElement");
            let images = target.querySelectorAll("img");

            let targetRect = target.getBoundingClientRect();

            images.forEach((img) => {
                let rect = img.getBoundingClientRect();
                pdf.addImage(img, "JPEG", targetRect.x - rect.x, targetRect.y - rect.y, rect.width, rect.height);
                img.remove();
            });
        }
    }
});

[HackbrettXXX]

Thanks for reporting this. Although I think this is more of a missing feature than a bug. If I read the documentation correctly, the options.image.quality argument only applies when using the toImg function on the result of html2canvas. But I agree that this option should also apply when converting images in the HTML markup.

[sanishtjppi]

Same issue. I have around 10 images in my html but very small sized PNGs. PDF size increases exponentially when converting my html to PDF.

[jackcobb]

Thanks for reporting this. Although I think this is more of a missing feature than a bug. If I read the documentation correctly, the options.image.quality argument only applies when using the toImg function on the result of html2canvas. But I agree that this option should also apply when converting images in the HTML markup.

I disagree. If its intentionally not implemented, it should be spelled out in the documentation found at http://raw.githack.com/MrRio/jsPDF/master/docs/module-html.html

Based on that, its not clear that certain properties are not applicable

[rajorpratyush]

@ericjames Hey your method doesn't work for me.. images positions are not maintained.

Y co-ordinates comes in negative

[Uzlopak]

I suppose the problem is that maybe images are stored in the resourcedictionary or html2canvas is drawing those images as bitmap?

[rajorpratyush]

Hey i solved this problem, It's a hack but it does work very good

What i did was just load the images with FAST compression but place them outside the boundary of the page. Now what happens is the cache automatically picks them so the original images comes compressed. So there will be duplicate copies of all the images but since they are not in the view it will not be shown and the one in the view will automatically will be compressed

Use the same code as above just remove the line
img.remove();

[Uzlopak]

It can also be, that you by doing the img.remove() forced jsPDF to store the next identical image as a new resource. So then you would store the same image again and again.