< 返回瑞兽谷
批量转到
工具加载中,请稍候。
JavaScript 实例:HEIC 转到 JPEG、PNG
依赖
- libheif 1.11.0 (核心功能。2021.11.27 从 heic2jpg.online 采集)
- LEORChn base.js (提供一些语法糖,快速实现部分功能)
库代码的改动
因为需要实现用户体验提升(防止界面卡死)因此对 libheif 库代码做了部分改动。
具体改动为:
- 将 HeifImage 类从私有内部类公开到可供外部访问。
如果要获得原版,请访问文件名:libheif.1.11.0.min.origin.js
优势
- 本工具支持多选文件进行转换。
- 本工具支持输出为 JPG 或 PNG 格式,但请在选择文件前设置。
- 若为 Chromium 内核浏览器,可以在转换后直接把图像拖到文件夹内即可保存。其他浏览器也可以尝试看看能不能进行这样的操作。
备注:如果把自然风景等 色彩过于丰富的图像 转为 PNG 格式,可能导致浏览器占用过高或崩溃。建议先转为 JPG 进行预览,然后再决定。
内部实现步骤
- 因为 heic 格式普及率较低,所以浏览器没有自带相关功能。而软件解码需要耗时较长,如果不放在 Worker 里则会导致浏览器假死
- 创建一个 Worker,使其能够输入文件IO的 ArrayBuffer 参数,并输出一个用 HeifImage 类的克隆对象封装的、已解码用于 RAM 的图像数据
- 因为克隆对象会丢失原本的函数方法,因此传递到外部后,须要重新给这个克隆对象写入 HeifImage 类的相关函数方法。这也是我修改了库代码的原因
- 把解码后的图像数据输入给 Canvas,让 Canvas 转换图片到指定的格式(JPG、PNG 等)并用于在硬盘上存储
还能继续改进的地方
- 封装。甚至把 FileReader 也封装到 Worker 里。
- 改进 Worker 输出。因为目前为止,所需的 libheic.js 里部分步骤仍然需要与 Worker 之外的 Canvas 进行交互。我能想到的就是破解 HeifImage.prototype.display 的运行逻辑,使之能输出 ImageData 或者 ImageBitmap 等无需前台逻辑的数据类型。