React Native/Node.js中HEIC/HEIF转JPG及Sharp兼容问题解决

客户端（React Native iOS）方案 #

1. 检测HEIC/HEIF格式 #

使用图片选择库（如expo-image-picker或react-native-image-picker）获取图片时，可通过返回的mimeType字段直接判断格式：

• HEIC/HEIF对应MIME类型：image/heic、image/heif
• JPG/PNG对应MIME类型：image/jpeg、image/png

示例代码（Expo环境）：

import * as ImagePicker from 'expo-image-picker';

const pickImage = async () => {
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsEditing: false,
    quality: 1,
  });

  if (!result.canceled) {
    const asset = result.assets[0];
    if (asset.mimeType === 'image/heic' || asset.mimeType === 'image/heif') {
      await convertHeicToJpg(asset.uri);
    } else {
      await uploadImage(asset.uri);
    }
  }
};

2. 客户端转换为JPG #

方案一（Expo环境）：用expo-image-manipulator直接转格式

import * as ImageManipulator from 'expo-image-manipulator';

const convertHeicToJpg = async (uri) => {
  const manipulatedImage = await ImageManipulator.manipulateAsync(
    uri,
    [],
    { format: ImageManipulator.SaveFormat.JPEG, quality: 0.8 }
  );
  await uploadImage(manipulatedImage.uri);
};

方案二（原生RN环境）：用react-native-image-crop-picker指定输出格式

import ImagePicker from 'react-native-image-crop-picker';

ImagePicker.openPicker({
  mediaType: 'photo',
  cropping: false,
  compressImageFormat: 'jpg',
  compressImageQuality: 0.8,
}).then(image => {
  uploadImage(image.path);
});

服务端（Node.js）方案 #

1. 检测HEIC/HEIF格式 #

不要依赖文件名后缀，优先通过文件头（Magic Number）判断，推荐使用file-type库：

import { fileTypeFromFile } from 'file-type';

async function isHeicFile(filePath) {
  const fileType = await fileTypeFromFile(filePath);
  return fileType?.mime === 'image/heic' || fileType?.mime === 'image/heif';
}

如果想用Sharp兜底检测（需注意兼容问题）：

import sharp from 'sharp';

async function checkImageFormat(filePath) {
  try {
    const metadata = await sharp(filePath).metadata();
    return metadata.format === 'heic' || metadata.format === 'heif';
  } catch (err) {
    return isHeicFile(filePath);
  }
}

2. 服务端转换为JPG #

方案一：用heic-convert转码后再交给Sharp处理

针对Sharp不支持的HEIC codec（如报错中的4.3000），先转成JPG再进行缩放：

import fs from 'fs/promises';
import convert from 'heic-convert';
import sharp from 'sharp';

async function convertHeicToJpgAndResize(filePath, outputPath) {
  const buffer = await fs.readFile(filePath);
  const jpgBuffer = await convert({
    buffer,
    format: 'JPEG',
    quality: 0.8,
  });
  await sharp(jpgBuffer)
    .resize(800, 800, { fit: 'inside' })
    .toFile(outputPath);
}

方案二：更新Sharp依赖的libheif库

重新编译Sharp，确保依赖的libheif版本支持目标codec：

npm rebuild sharp --verbose

方案三：改用GraphicsMagick（gm库）

若上述方案仍有问题，可换用对HEIC兼容性更好的gm：

import gm from 'gm';

gm(filePath)
  .format('JPEG')
  .quality(80)
  .resize(800, 800)
  .write(outputPath, (err) => {
    if (err) console.error(err);
  });

内容的提问来源于stack exchange，提问作者Sam Leurs