Add image without distorting ratio

[mednche]

"I have read and understood the contribution guidelines."

I am trying to add an image (dataURL format) to my PDF to fit in a 65*60 mm box.

My current code is:

doc.addImage(imageURL, "JPEG", config_settings.x, config_settings.y, 65, 60, "", "FAST", 0);

However I get a distorted image as below, which doesn't respect the aspect ratio of the original image.

My images are already in the correct dimensions to fit in the box (see below for the correct ratio) so I'd like to be able to add them to the PDF without enforcing a width and height.

Alternatively, is there a way to specify a resize mode for my image (e.g. 'contain')?

[JobSoltero]

Hi @mednche, I haven't seen this kind of functionality in jsPDF but in cases like yours I use this formula, using html2canvas:

...
      html2canvas(input)
          .then((canvas) => {
            const imgData = canvas.toDataURL('image/jpeg'); 
            const pdf = new jsPDF();
            const imgProps= pdf.getImageProperties(imgData);
            const width = 65 //which is your container width
            const height = (imgProps.height * width) / imgProps.width;
            pdf.addImage(imgData, "JPEG", config_settings.x, config_settings.y, width, height);
            pdf.save('download.pdf');
      });
        ...

Also make sure u are using the correct units.

[mednche]

Thanks for your reply @JobSoltero! Can you explain a bit more what html2canvas() does in this case (I was under the impression that it was typically used to take a screenshot of the current screen) and also what input would be in my case? Thanks!

[JobSoltero]

Yeah it uses an html as input and then converts it into an Image. For your case u can directly use the Image url

const pdf = new jsPDF(); 
const imgProps = pdf.getImageProperties(imgUrl);
const width = 65 //which is your container width 
const height = (imgProps.height * width) / imgProps.width; 
pdf.addImage(imgUrl, "JPEG", config_settings.x, config_settings.y, width, height); pdf.save('download.pdf'); 

[JobSoltero]

@mednche Do you have any update in this bug?

[mednche]

Thanks for your answer @JobSoltero! It helped me find a solution. I didn't know about pdf.getImageProperties() - it did the trick!

[JobSoltero]

Great!, I guess this issue can be closed now