Skip to content

Support image compression in html() function #3178

Open
@ericjames

Description

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions