jsPDF.html method doesn't recognize the image quality option

Question

Method jsPDF.html() has an option to set the image quality (HTMLOptionImage) but this does not seem to affect the image quality or inevitably the document size at all.

My goal is to get the PDF document size down to a reasonable level, but anytime I add images, it blows it up way larger than it needs to be. Like even a 50kb image file on the document turns it into a 1 MB PDF.

It also seems compress doesn't really affect it, the PDF is the same size either way.

Example code using an external image (may have to run this on your local).

package.json running "react": "^17.0.2", and "jspdf": "^2.3.1",

import { jsPDF } from "jspdf";

const stackoverflow = () => {

function downloadMe() {
    const ele = document.querySelector('#stackoverflowexample');

    const pdf = new jsPDF({
        orientation: 'p',
        unit: 'px',
        format: 'letter',
        compress: true,
        putOnlyUsedFonts: true,
        hotfixes: ['px_scaling'] // an array of hotfix strings to enable
    });

    pdf.html(ele, {
        image: { quality: 10, type: "jpeg" },
        x: 10,
        y: 10,
        callback: function (doc) {
            doc.save(); // File size is huge even though images are small kb
            // attachment = doc.output('datauristring');
        },
    });
}

return (
    <div id="stackoverflowexample">
        <h1>PDF</h1>
        <button onClick={downloadMe}>Download Button</button>
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Borobudur-Temple-Park_Elephant-cage-01.jpg/320px-Borobudur-Temple-Park_Elephant-cage-01.jpg" />
        <p>Image makes PDF larger than it should have to be</p>
    </div>)
}

export default stackoverflow;

Answer 1

So I can solve this file size issue by selectively removing and re-adding those image elements with an addImage but it doesn't address the underlying problem that the .html method is blowing up the img element data sizes.

        html2canvas: {
            onclone: (doc) => {
                let target = doc.querySelector("#stackoverflowexample");
                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();
                });
            }

Answer 2

The image object has a multiplier property, try using that, it will effect the quality of the image and this would result in a greater or lesser file size depending upon what value you set of multiplier

image: { quality: 10, type: "jpeg", multiplier: .5 }