你好，Dev.to！👋
想象一下这样的场景：你正处于开发冲刺阶段，客户发来一批他们用苹果手机拍摄的资源文件，你将它们拖入项目文件夹中。
突然，构建失败了。浏览器无法渲染这些文件。设计工具菲格玛也报错连连。
因为这些是 .heic 格式的文件。
苹果公司的高效图像容器格式（HEIC）是压缩工程的杰作，为我们的手机节省了数吉字节的存储空间。但在苹果生态系统之外？对于网页开发者和设计师来说，它简直就是一场噩梦。
大多数在线转换工具的架构缺陷
如果你在网上搜索“转换 HEIC”，映入眼帘的满是广告泛滥、靠搜索引擎优化堆砌的网站。作为一名开发者，使用这些工具总让我感到沮丧，因为其底层架构毫无道理可言：
隐私风险：你正在将个人照片、身份证件或敏感文档上传到一个未知的远程服务器。
带宽损耗：为什么我要为了更改一个文件扩展名，就将 5 兆字节的数据通过网络发送，在服务器队列中等待，然后再下载回来？
人为限制：“您已达到 3 次免费转换的上限。”
处理图像本不应需要发起超文本传输协议请求。现代浏览器拥有足够的计算能力在本地处理此类任务。因此，我决定构建一个纯粹“原生开发者友好”的解决方案。
🚀 隆重介绍 HEIC 工具：100% 本地运行，零上传
我构建了一套实用工具套件，其转换引擎完全在你的浏览器内存中运行。
通过将繁重的计算任务卸载到你本地的中央处理器，文件永远不会离开你的设备。你甚至可以加载页面后断开无线网络连接，它依然能完美地处理你的文件。
由于不同的工作流程需要不同的输出格式，我将引擎拆分为三个优化的处理管道：
面向网站与内容管理系统：当你需要为网站提供最大兼容性和轻量级资源时，请使用 HEIC 转 JPG 管道进行处理。
面向用户界面/用户体验设计：当你将资源导入菲格玛或照片编辑软件，且不能承受压缩伪影（或需要透明背景）时，请使用无损的 HEIC 转 PNG 转换器。
面向文档归档：如果你用苹果手机扫描了合同、白板或发票，你一定不希望得到散乱的图像文件。你可以使用 HEIC 转 PDF 编译器将这些帧合并为一个整洁的单一文档。
🛠 技术内幕：网络汇编语言与网络工作线程
构建此工具是对浏览器性能管理的一次绝佳实践。
为了在浏览器中解码苹果的专有格式，我通过开源的 libheif-js 模块利用了网络汇编语言（WASM）。但是，如果在主 JavaScript 线程上运行繁重的 WASM 解码任务，整个浏览器用户界面将会冻结。
为了解决这个问题，二进制数据被传递给了一个网络工作线程，由它在后台完成解码工作。
棘手之处在于？HEIC 不仅仅是一张图像，它是一个容器。单个 .heic 文件可以包含多个帧（例如连拍照片、缩略图或动态照片）。如果你盲目地导出找到的第一帧，最终得到的可能是一张模糊的 256x256 像素缩略图。
以下是我在网络工作线程中编写的提取逻辑，用于在渲染之前动态寻找最高分辨率的帧：
// 'decodedFrames' 是由
免责声明：本文内容来自互联网，该文观点不代表本站观点。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请到页面底部单击反馈，一经查实，本站将立刻删除。
分享到：
长按或扫码识别 分享给好友
![长按或扫码识别 分享给好友]()
