HEIC图片转JPG格式的简单指南，轻松转换、完美呈现！

前端

2023-07-05 14:52:29

将 HEIC 图片转换为 JPG：JavaScript 解决方案

随着智能手机摄影技术的不断发展，HEIC（高效图像文件格式）逐渐成为主流图像格式。然而，HEIC 格式并非像 JPG 那样广泛兼容，这可能在某些情况下造成不便。

问题：HEIC 格式的兼容性问题

HEIC 格式是一种先进的图像格式，提供了比 JPG 更高的图像质量和更小的文件大小。然而，由于其相对较新的特性，一些较旧的设备、软件和在线平台仍不支持 HEIC。这可能会导致在查看、编辑或分享 HEIC 图像时出现问题。

解决方案：使用 JavaScript 转换 HEIC 到 JPG

一个简单且有效的解决方案是使用 JavaScript 将 HEIC 图像转换为 JPG 格式。JavaScript 是一种流行的脚本语言，可以在各种平台和设备上运行，这使得它成为一种通用的转换工具。

实施步骤：

以下是如何使用 JavaScript 将 HEIC 图片转换为 JPG 格式：

获取 HEIC 图片的 Blob 对象： 使用 FileReader API 将 HEIC 图片文件读入 Blob 对象。
使用 heic2any 转换 Blob 对象： 使用 heic2any 库将 HEIC Blob 对象转换为 JPG Blob 对象。
将 JPG Blob 对象转换为 DataURL： 使用 FileReader API 将 JPG Blob 对象转换为 DataURL，这是一个包含图像数据的 base64 编码字符串。
显示转换后的 JPG 图像： 将 DataURL 赋给 HTML img 元素的 src 属性，并在页面中显示转换后的图像。

代码示例：

import { heic2any } from "heic2any";

const blob = new Blob([file], { type: "image/heic" });
const jpgBlob = await heic2any({ blob });
const dataURL = await new Promise((resolve) => {
  const reader = new FileReader();
  reader.onload = () => {
    resolve(reader.result);
  };
  reader.readAsDataURL(jpgBlob);
});
const img = document.createElement("img");
img.src = dataURL;
document.body.appendChild(img);