reactjs - 如何在 React 中将 HEIC 转换为 JPG？

Question

HEIC 是 Apple 自己的格式，用于存储使用 iOS 相机拍摄的高分辨率图像。但我会存储在后端 JPG 上，因为 HEIC 在大多数浏览器中不显示，甚至在 Safari 中也不显示。

解决方案1

我尝试了这个转换:

const buffer = Buffer.from(await file.arrayBuffer())
const d = heicConvert({ buffer, format: 'JPEG' })

const imgBase64 = btoa(
    d.reduce((data, byte) => `${data}${String.fromCharCode(byte)}`, '')
)

但是因为我使用 Next.js 它与它不兼容。

Failed to compile.

./node_modules/libheif-js/libheif/libheif.js
Module not found: Can't resolve 'fs' in '/Users/janoskukoda/Workspace/tikex/portal/team/node_modules/libheif-js/libheif'

解决方案2

我也尝试过:

export default uploadImage

const buffer = await file.arrayBuffer()
const image = sharp(buffer)
const metadata = await image.metadata()

if (metadata.format === 'heic') {
    // Convert the image to JPG
    const jpgBuffer = await image.jpeg().toBuffer()

    // Encode the JPG image as a base64 string
    const imgBase64 = btoa(
        jpgBuffer.reduce((data, byte) => `${data}${String.fromCharCode(byte)}`, '')
    )
}

但是我无法编译，看来sharp不建议在客户端使用。

你还有其他办法吗？

无论如何，想法就在这里:https://itnext.io/tackling-iphone-or-ipad-images-support-in-browser-8e3e64e9aaa1

如果你向我展示一个使用无服务器 API 的解决方案，也可以。重要的是文件来自 html 输入元素。

解决方案3

import loadImage from 'blueimp-load-image'

convertedImage = await new Promise((resolve, reject) => {
    loadImage(
        propsAndFile.file,
        resolve,
        { orientation: true, canvas: true },
        reject
    )
})

Answer 1

Before getting to the answer: You can never trust data uploaded by a client — you must always validate/convert using a process that is not accessible by a user (a backend process) to ensure data validity: even if there are mechanisms in place to validate received network requests as coming from an authenticated user on your site, any user can still use developer tools to execute arbitrary JavaScript and send whatever kinds of network requests with whatever payloads that they want to.

关于 iOS 设备以及从文件输入获取 JPEG 而不是 HEIF:您不需要自己执行此操作 — iOS 可以为您执行此操作。

<input type="file">元素支持 accept可用于限制可上传的文件媒体类型类型的属性:请阅读 <input type="file"> 的 MDN 文档文章的限制接受的文件类型部分了解更多信息。 .

下面是一个示例，展示了如何使用该属性。当 iOS 用户选择输入时，他们可以选择使用相机拍照或从照片库中选择一张照片。在这两种情况下，iOS 都会自动执行必要的 JPEG 文件转换(例如，即使从照片库中选择的图像是 HEIF 格式)。当您在 iOS 设备上尝试使用 HEIF 编码的图像时，该示例演示了这一点:

const input = document.getElementById('image-upload');
const output = document.getElementById('output');

const updateDisplayedFileInfo = () => {
  const file = input.files?.[0];

  if (!file) {
    output.textContent = 'No file selected';
    return;
  }

  const dateModified = new Date(file.lastModified).toISOString();
  const {name, size, type} = file;

  const data = {
    dateModified,
    name,
    size,
    type,
  };

  const json = JSON.stringify(data, null, 2);
  output.textContent = json;
};

input.addEventListener('change', updateDisplayedFileInfo);
updateDisplayedFileInfo();

pre { background-color: hsla(0, 0%, 50%, 0.1); padding: 0.5rem; } code { font-family: monospace; }

<input id="image-upload" type="file" accept="image/jpeg" />
<pre><code id="output"></code></pre>