如何在 ReactJS 中保留照片的元数据的同时调整照片大小?

问题描述 投票:0回答:0

我正在构建一个 ReactJS 应用程序,用户可以在其中上传照片。我希望能够调整照片大小以减小文件大小,但我也想保留照片附带的原始元数据(例如 EXIF 数据)。

我研究过各种库,例如 react-image-file-resizer 和 react-image-resizer,但我不确定如何在调整照片大小时保留元数据。任何人都可以指出我正确的方向或提供如何在 ReactJS 中实现这一目标的示例吗?

const uploadPicture = async (file: any) => {
    const jwt = getStorageItem(WebStorageKeys.Jwt)
    const acceptLanguage = getStorageItem(WebStorageKeys.Lang) || Locales.Ms

    const imgBody = new FormData()

    const imageSpec = {
      maxWidth: 2048,
      maxHeight: 2048,
      compressFormat: 'JPEG',
      quality: 80,
      rotation: 0
    }

    const resizeFile = (file: File) =>
      new Promise((resolve) => {
        Resizer.imageFileResizer(
          file,
          imageSpec.maxWidth,
          imageSpec.maxHeight,
          imageSpec.compressFormat,
          imageSpec.quality,
          imageSpec.rotation,
          (uri) => {
            resolve(uri)
          },
          'file'
        )
      })

    const resizedFile: any = await resizeFile(file)

    imgBody.append('photo', resizedFile, resizedFile.name)
    imgBody.append('submissionId', submission?._id || '')

    const res = await fetch(`${config.gateway.baseUrl}/api/submissions/upload-image`, {
      method: 'POST',
      headers: {
        Authorization: `Bearer ${jwt}`,
        'accept-language': acceptLanguage
      },
      body: imgBody
    })

    const data = await res.json()

    return { url: data.url }
  }

我期望发生的是调整大小后的图像具有与原始图像相同的元数据,这样我仍然可以访问照片拍摄的日期、时间和位置等信息。

实际结果是调整大小后的图像没有元数据,所有信息都丢失了

任何人都可以指出我正确的方向或提供如何在 ReactJS 中实现这一目标的示例吗?

reactjs file-upload metadata image-resizing exif
© www.soinside.com 2019 - 2024. All rights reserved.