React中删除图片XMP元数据以解决AWS WAF拦截问题

推荐库：browser-image-metadata-editor #

这个库支持浏览器端精准编辑图片元数据，既能移除XMP字段，又能保留你需要的相机参数等其他EXIF信息，完美匹配你的需求。结合react-dropzone的使用步骤如下：

1. 安装依赖：

npm install browser-image-metadata-editor

2. 在文件上传逻辑中集成：

import { removeMetadata } from 'browser-image-metadata-editor';

const handleDrop = async (acceptedFiles) => {
  const targetFile = acceptedFiles[0];
  // 仅移除XMP，保留其他EXIF信息
  const processedBlob = await removeMetadata(targetFile, {
    keepExif: true,
    removeXmp: true
  });
  
  // 转换为可直接上传的File对象
  const processedFile = new File([processedBlob], targetFile.name, { type: targetFile.type });
  
  // 执行后续上传逻辑...
};

备选方案：Canvas重绘（彻底清除所有元数据） #

如果上述库不符合你的场景，可通过Canvas重新绘制图片，彻底清除包括XMP在内的所有元数据。但注意这种方式会同时丢失相机参数等其他EXIF信息，仅适合不需要保留任何元数据的场景：

const stripAllMetadata = async (file) => {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);
      canvas.toBlob((blob) => {
        const processedFile = new File([blob], file.name, { type: file.type });
        resolve(processedFile);
      }, file.type);
    };
    img.src = URL.createObjectURL(file);
  });
};

// 在handleDrop中调用
const processedFile = await stripAllMetadata(acceptedFiles[0]);

关于piexifjs的补充说明 #

piexifjs本身不支持XMP数据的识别与处理——因为XMP存储在图片APP1扩展段的独立子块中，不在piexifjs的默认解析范围内。如果坚持要使用它，需要手动解析图片二进制数据，定位并移除XMP对应的子块，这种方式复杂度极高，远不如直接使用支持XMP编辑的专用库高效。

内容的提问来源于stack exchange，提问作者Ailu Vee