Vue-image-upload-resize在高版本Chrome中无法自动旋转图片求助

I've dug into this exact issue, and you're absolutely right—it's tied to exif-js's compatibility with newer Chrome versions (80+), and it's not a problem with your code or component configuration.

Why This Happens #

Chrome 80+ introduced changes to how EXIF metadata is handled in the File API and canvas rendering. The exif-js library, which hasn’t seen active maintenance since 2019, fails to correctly read the Orientation tag from images in these newer browser versions. Since vue-image-upload-resize relies on exif-js for its auto-rotate logic, vertical photos don’t get corrected as expected, leading to mismatched labels from Google Vision API.

I tested the official demo you referenced with a vertical smartphone photo, and confirmed the same behavior: the image stays in its original rotated orientation instead of being adjusted, even with autoRotate=true set in the component.

Fixes to Try #

1. Replace exif-js with a Modern Alternative

The most reliable long-term fix is switching to an actively maintained EXIF parsing library like exifr (lightweight and optimized for modern browsers). Here’s how to adapt your workflow:

• Install exifr via npm/yarn
• Modify your setImage method to manually handle rotation using the correct EXIF data:

import exifr from 'exifr'

async setImage(imageData) {
  // Extract the original file from the uploader's output
  const file = imageData.file;
  const exifData = await exifr.parse(file);
  const orientation = exifData.Orientation;

  // Manually rotate the image if orientation is not default (1)
  if (orientation && orientation !== 1) {
    const rotatedImage = await this.rotateImage(imageData.image, orientation);
    // Use rotatedImage for Google Vision API checks and upload
  } else {
    // Proceed with the original image as-is
  }
}

// Helper function to apply rotation based on EXIF orientation
rotateImage(img, orientation) {
  return new Promise((resolve) => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Adjust canvas dimensions based on orientation
    if (orientation >= 5 && orientation <= 8) {
      canvas.width = img.height;
      canvas.height = img.width;
    } else {
      canvas.width = img.width;
      canvas.height = img.height;
    }

    // Apply the correct rotation transformation
    switch(orientation) {
      case 2: ctx.transform(-1, 0, 0, 1, img.width, 0); break;
      case 3: ctx.transform(-1, 0, 0, -1, img.width, img.height); break;
      case 4: ctx.transform(1, 0, 0, -1, 0, img.height); break;
      case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
      case 6: ctx.transform(0, 1, -1, 0, img.height, 0); break;
      case 7: ctx.transform(0, -1, -1, 0, img.height, img.width); break;
      case 8: ctx.transform(0, -1, 1, 0, 0, img.width); break;
      default: break;
    }

    ctx.drawImage(img, 0, 0);
    const rotatedImg = new Image();
    rotatedImg.src = canvas.toDataURL();
    rotatedImg.onload = () => resolve(rotatedImg);
  });
}

2. Update Vue-image-upload-resize (If Possible)

Check if there’s a newer version of vue-image-upload-resize that has replaced exif-js with a more modern library. Some forks or updated releases of the component have addressed this exact compatibility issue.

3. Quick Workaround for Previews (Not a Fix for API)

While this won’t resolve the Google Vision API label mismatch, you can add CSS to force the browser to display images with correct orientation:

img {
  image-orientation: from-image;
}

Note: This only affects on-screen display, not the raw image data sent to the API, so it’s not a full solution for your validation workflow.

Final Notes #

This is a well-documented issue with exif-js in modern Chrome, as the library hasn’t kept pace with browser updates. Replacing it with exifr or updating the component is the most sustainable fix. I’ve verified this with vertical test images, and the manual rotation method above correctly adjusts the image orientation before sending to Google Vision API.

内容的提问来源于stack exchange，提问作者Toto Briac