exif orientation is handled incorrectly

[Fuzzyma]

jspdf handles exif orientation and correctly flips width and height. However, it does not actually rotate the image. Instead it just stretches the unrotated image into its rotated shape.

This issue has been rised twice already but it seems that nobody realized that the image is not correctly rotated

• some images are auto-rotated when I use addImage function #2815
• 2448 X 3264 add image problem  #2740

In both issues you can actually see, that albeit the image dimension was rotated, the content was not.
I encountered the issue when using svg2pdf.js. You can also see another example in the issue I raised: yWorks/svg2pdf.js#315. The orientation is correct, the content is still unrotated and just stretched

[NikolaStojicic]

I am facing same issue with addImage function, it does not respect exif orientation.

Bellow you can find my suboptimal solution if anyone needs it before this gets addressed.

Uses canvas to draw image first, canvas rendering will display image correctly then grabbing data and passing it to addImage fn.

import jsPDF from 'jspdf';

async function createImage(src: string) {
    const img = new Image();
    img.src = src;
    img.setAttribute('crossorigin', 'anonymous');

    return new Promise<{
      width: number;
      height: number;
      imageCanvasData: string;
    }>((resolve) => {
      img.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = img.width;
        canvas.height = img.height;
        ctx?.drawImage(img, 0, 0, img.width, img.height);
        const imageCanvasData = canvas.toDataURL('image/jpeg');
        canvas.remove();
        resolve({ width: img.width, height: img.height, imageCanvasData });
      };

      img.onerror = () => resolve({ width: 0, height: 0, imageCanvasData: '' });
    });
  }

  const pdf = new jsPDF();

  const { width, height, imageCanvasData } = await createImage(
    'https://images.unsplash.com/photo-1504805572947-34fad45aed93?q=20&w=200',
  );

  console.log(width, height, imageCanvasData);
  pdf.addImage(imageCanvasData, 'JPEG', 0, 0, width, height);
  pdf.save('download.pdf');

[mbrunneritlabs]

I also think something is wrong with how jspdf handles the rotation.

Lets say i have an image as Base64 with the following dimensions:

width: 100
height: 50
rotation: 90*

After creating an image

const img = new Image()
img.src("Base64String")

Then the dimensions seem correctly rotated because

imageWidth = img.width //= 50
imageHeight= img.height //= 100

Then i add an page to jspdf with

      doc.addPage([imageWidth, imageHeight]);

and add the correct image like this

doc.addImage(img, 'JPEG', 0, 0, imageWidth, imageHeight, undefined, 'MEDIUM');

On my pdf then the page dimensions are correct (height is bigger then width), but the image is not rotated even tough it most probably was already rotated when creating the image .

The workaround with drawing on Canvas and giving this image to jspdf works.

[Fuzzyma]

@HackbrettXXX if you point me to the approximate position of where the code for this functionality is located, I am happy to create a PR (when I find the time lol)

[HackbrettXXX]

Maybe around here?

jsPDF/src/modules/addimage.js

Line 443 in 637b5d3

var determineWidthAndHeight = function(width, height, image) {

You might use @MrRio's feat/typescript branch as base. Not sure in what state that is, though.

[Fuzzyma]

@HackbrettXXX maybe we should get that over the line first then? Seems like a major rework to add typescript

[MrRio]

I wouldn't worry too much about the TypeScript branch for now. Going to take an approach which involves a bunch of smart automation, so feel free to get this merged when it's ready.