我正在构建一个 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 中实现这一目标的示例吗?