如何在Jimp压缩或使用cover函数时保留EXIF数据并处理旋转问题？

Hey there! I’ve run into similar issues with Jimp and EXIF data before, so let’s break down how to fix both problems you’re facing.

Fixing the Image Rotation Issue #

Jimp doesn’t automatically respect the EXIF Orientation tag out of the box—that’s why your locally rotated images lose their correct orientation after processing. To fix this, you need to:

1. Extract the Orientation value from the image’s EXIF data
2. Manually rotate/flip the image to match that orientation
3. Proceed with your compression or cover operations

Here’s a practical example using the exif-parser library to read EXIF data (it’s lightweight and easy to use):

First, install the dependency:

npm install exif-parser

Then use this code snippet:

const Jimp = require('jimp');
const fs = require('fs');
const ExifParser = require('exif-parser');

async function processImage(imagePath) {
  // Step 1: Read the image file and extract EXIF data
  const imageBuffer = fs.readFileSync(imagePath);
  const exifParser = ExifParser.create(imageBuffer);
  const exifData = exifParser.parse();
  const orientation = exifData.tags.Orientation || 1; // Default to normal orientation

  // Step 2: Load the image into Jimp
  let image = await Jimp.read(imageBuffer);

  // Step 3: Rotate/flip based on the EXIF Orientation tag
  switch (orientation) {
    case 2: image.flip(true, false); break; // Horizontal flip
    case 3: image.rotate(180); break; // 180° rotation
    case 4: image.flip(false, true); break; // Vertical flip
    case 5: image.rotate(90).flip(true, false); break; // 90° clockwise + horizontal flip
    case 6: image.rotate(90); break; // 90° clockwise
    case 7: image.rotate(270).flip(true, false); break; // 90° counter-clockwise + horizontal flip
    case 8: image.rotate(270); break; // 90° counter-clockwise
    default: break; // No rotation needed
  }

  // Step 4: Perform your desired operations (compression/cover)
  image.quality(80); // Compress to 80% quality
  // image.cover(800, 600); // Uncomment if you need to resize with cover

  // Step 5: Save the corrected image
  await image.writeAsync('processed-image.jpg');
}

// Run the function
processImage('your-input-image.jpg').catch(err => console.error('Error processing image:', err));

Preserving EXIF Data After Processing #

Jimp resets EXIF data when it re-encodes images during processing. To retain EXIF data (minus the now-obsolete Orientation tag, since we’ve already fixed the rotation), you’ll need to manually inject the original EXIF data back into the processed image.

We can use piexifjs for this—it’s a pure-JS library that lets you manipulate EXIF data easily.

First, install the dependency:

npm install piexifjs

Modify the earlier code to include EXIF preservation:

const Jimp = require('jimp');
const fs = require('fs');
const ExifParser = require('exif-parser');
const piexif = require('piexifjs');

async function processImageWithExif(imagePath) {
  // Step 1: Read image and extract EXIF data
  const imageBuffer = fs.readFileSync(imagePath);
  const exifParser = ExifParser.create(imageBuffer);
  const exifTags = exifParser.parse().tags;
  const orientation = exifTags.Orientation || 1;

  // Step 2: Load and correct image orientation
  let image = await Jimp.read(imageBuffer);
  switch (orientation) {
    // Same rotation/flip logic as before
    case 2: image.flip(true, false); break;
    case 3: image.rotate(180); break;
    case 4: image.flip(false, true); break;
    case 5: image.rotate(90).flip(true, false); break;
    case 6: image.rotate(90); break;
    case 7: image.rotate(270).flip(true, false); break;
    case 8: image.rotate(270); break;
    default: break;
  }

  // Step 3: Perform compression/cover operations
  image.quality(80);
  // image.cover(800, 600);

  // Step 4: Get processed image buffer
  const processedBuffer = await image.getBufferAsync(Jimp.MIME_JPEG);

  // Step 5: Update EXIF tags (set Orientation to 1 since we fixed rotation)
  const updatedExifTags = { ...exifTags, Orientation: 1 };
  // Convert EXIF tags to binary format
  const exifBinary = piexif.dump(updatedExifTags);

  // Step 6: Inject EXIF data into the processed image
  const finalImageData = piexif.insert(exifBinary, processedBuffer.toString('binary'));

  // Step 7: Save the final image with preserved EXIF
  fs.writeFileSync('processed-image-with-exif.jpg', Buffer.from(finalImageData, 'binary'));
}

processImageWithExif('your-input-image.jpg').catch(err => console.error('Error:', err));

Key Note: #

We set Orientation: 1 in the updated EXIF data because we’ve already physically rotated the image. If we left the original orientation tag, some viewers/browsers would rotate the image again, leading to incorrect orientation.

内容的提问来源于stack exchange，提问作者Alpit Anand