parallax/jsPDF

Support image compression in html() function

Open

#3178 opened on May 29, 2021

View on GitHub
 (10 comments) (0 reactions) (0 assignees)JavaScript (28,280 stars) (4,596 forks)batch import
Feature Requestdifficulty:beginnerhacktoberfesthelp wanted

Description

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();
            });
        }
    }
});

Contributor guide