Why my images are being returned with a -90 degrees rotation, using the PptxGenJS library with react.js?

Question

I'm using the PptxGenJS library in conjunction with React.js to generate PowerPoint presentations. However, I've encountered an issue where certain images appear misaligned, as if rotated to -90 degrees, when viewed in the generated presentation. Strangely, when I open the same JPEG images directly in a web browser, they appear correctly oriented. This discrepancy doesn't occur for everyone. Any insights on why this might be happening?

Answer 1

I meet same rotate error. I found that this error only occurs on photos taken by specific person. The pictures included metadata - orientation. You can use exif-js to rotate pictures like this: (You need install exif-js)

async function downloadAndProcessImage(url: string): Promise<string> {
  const base64 = await downloadImageAsBase64(url);
  return new Promise<string>((resolve, reject) => {
    const img = new Image();
    img.onload = () => {
      EXIF.getData(img, function () {
        const orientation = EXIF.getTag(this, "Orientation");
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");

        if (ctx) {
          let width = img.width;
          let height = img.height;
          switch (orientation) {
            case 2: // horizontal flip
              ctx.transform(-1, 0, 0, 1, width, 0);
              break;
            case 3: // 180° rotate left
              ctx.transform(-1, 0, 0, -1, width, height);
              break;
            case 4: // vertical flip
              ctx.transform(1, 0, 0, -1, 0, height);
              break;
            case 5: // vertical flip + 90 rotate right
              canvas.width = height;
              canvas.height = width;
              ctx.transform(0, 1, 1, 0, 0, 0);
              break;
            case 6: // 90° rotate right
              canvas.width = height;
              canvas.height = width;
              ctx.transform(0, 1, -1, 0, height, 0);
              break;
            case 7: // horizontal flip + 90 rotate right
              canvas.width = height;
              canvas.height = width;
              ctx.transform(0, -1, -1, 0, height, width);
              break;
            case 8: // 90° rotate left
              canvas.width = height;
              canvas.height = width;
              ctx.transform(0, -1, 1, 0, 0, width);
              break;
            default:
              canvas.width = width;
              canvas.height = height;
              ctx.drawImage(img, 0, 0);
              resolve(canvas.toDataURL());
              return;
          }

          canvas.width = orientation >= 5 && orientation <= 8 ? height : width;
          canvas.height = orientation >= 5 && orientation <= 8 ? width : height;
          ctx.drawImage(img, 0, 0);
          resolve(canvas.toDataURL());
        } else {
          reject(new Error("Unable to get canvas context"));
        }
      });
    };
    img.onerror = reject;
    img.src = base64;
  });
}

1. download image
2. transform to base64
3. use exif and rotate
4. canvas to base64