用 WASM 实现 HEIC 本地转换：彻底告别上传服务器
其实处理图片根本不需要发起 HTTP 请求，现代浏览器的算力足够在本地完成。为了解决这个问题，我用 WebAssembly (WASM) 撸了一个纯客户端的转换工具，核心逻辑是：文件不离开内存，断网也能转。
技术实现：WASM + Web Workers
要在浏览器里解码苹果的私有格式，我选用了 libheif-js。但这里有个巨大的坑：WASM 的解码任务非常吃 CPU，如果直接在 JavaScript 主线程跑，界面会直接卡死（UI Freeze），用户体验极差。
为了实现流畅的实操体验，我采用了 Web Worker 方案。将二进制数据传递给后台 Worker 线程处理，主线程只负责 UI 状态更新。
还有一个细节容易被忽视：HEIC 其实是一个容器，一个 .heic 文件里可能包含多帧（比如 Live Photo 或者缩略图）。如果简单的直接导出第一帧，很大概率拿到的是一张 256x256 的模糊缩略图。
我在 Web Worker 内部写了一段逻辑，专门用来在容器中检索分辨率最高的那一帧，确保输出的是原图：
// 'decodedFrames' 是 WASM 解码器提取出的所有帧数组
let primaryImage = decodedFrames[0];
let maxResolutionArea = primaryImage.get_width() * primaryImage.get_height();
// 遍历 HEIC 容器，锁定最高分辨率的主图
for (let i = 1; i < decodedFrames.length; i++) {
let currentArea = decodedFrames[i].get_width() * decodedFrames[i].get_height();
if (currentArea > maxResolutionArea) {
primaryImage = decodedFrames[i];
maxResolutionArea = currentArea;
}
}
// 锁定原图后，将其绘制到 OffscreenCanvas 并以 Blob 形式本地导出三套优化管线
针对不同的开发/设计场景，我把转换逻辑分成了三条路径，避免单一格式导致的质量损失：
- Web/CMS 路径：针对网页适配，输出轻量化的 JPG，最大化兼容性。
- UI/UX 设计路径：针对 Figma 或 Photoshop 导入，采用无损 PNG 导出，保留透明通道且无压缩伪影。
- 文档归档路径：将 iPhone 扫描的合同或白板照片直接编译成单个 PDF，避免产生一堆碎片图片。
踩坑总结与实测
在开发过程中，最棘手的是内存管理。WASM 模块在处理大尺寸 HEIC（尤其是 48MP 的照片）时，内存占用会瞬间飙升。如果一次性加载 20 张图，浏览器标签页很容易 OOM（内存溢出）。
我的解决方案： 引入了分批处理机制，通过 Promise.all 配合并发限制（Concurrency Limit = 3），确保同一时间只有 3 张图在 WASM 队列中，这样即便在 8GB 内存的轻量级笔记本上也能稳定运行。
实测数据：在 MacBook M1 上，单张 5MB 的 HEIC 转换为 JPG，本地处理耗时约 180ms - 320ms，远快于“上传 → 服务器处理 → 下载”的完整链路（通常需要 3-5 秒）。
这种纯客户端的架构不仅保护了隐私，还省去了带宽成本，这才是开发者应该追求的工具形态。
