< 返回瑞兽谷
批量转到 工具加载中,请稍候。

JavaScript 实例:HEIC 转到 JPEG、PNG

依赖

  1. libheif 1.11.0 (核心功能。2021.11.27 从 heic2jpg.online 采集)
  2. LEORChn base.js (提供一些语法糖,快速实现部分功能)

库代码的改动

因为需要实现用户体验提升(防止界面卡死)因此对 libheif 库代码做了部分改动。

具体改动为:

如果要获得原版,请访问文件名:libheif.1.11.0.min.origin.js

优势

备注:如果把自然风景等 色彩过于丰富的图像 转为 PNG 格式,可能导致浏览器占用过高或崩溃。建议先转为 JPG 进行预览,然后再决定。

内部实现步骤

  1. 因为 heic 格式普及率较低,所以浏览器没有自带相关功能。而软件解码需要耗时较长,如果不放在 Worker 里则会导致浏览器假死
  2. 创建一个 Worker,使其能够输入文件IO的 ArrayBuffer 参数,并输出一个用 HeifImage 类的克隆对象封装的、已解码用于 RAM 的图像数据
  3. 因为克隆对象会丢失原本的函数方法,因此传递到外部后,须要重新给这个克隆对象写入 HeifImage 类的相关函数方法。这也是我修改了库代码的原因
  4. 把解码后的图像数据输入给 Canvas,让 Canvas 转换图片到指定的格式(JPG、PNG 等)并用于在硬盘上存储

还能继续改进的地方

  1. 封装。甚至把 FileReader 也封装到 Worker 里。
  2. 改进 Worker 输出。因为目前为止,所需的 libheic.js 里部分步骤仍然需要与 Worker 之外的 Canvas 进行交互。我能想到的就是破解 HeifImage.prototype.display 的运行逻辑,使之能输出 ImageData 或者 ImageBitmap 等无需前台逻辑的数据类型。