1

Curtion

@Ta / 2022-01-14 / 样 / 源

找了一下上游实现，最终追溯到这里
https://github.com/catdad-experiments/libheif-emscripten

所以最终实现代码来自此仓库：
https://github.com/strukturag/libheif
它是一个C/C++项目，上述JS是通过Emscripten编译而来，所以理论上可以生成wasm代码，也有相关issues在讨论。

于是我查了一下npm，目前有一个现成的库：
https://www.npmjs.com/package/@saschazar/wasm-heif
从此库的描述来看，应该是支持浏览器的。

所以可以试试wasm，它应该会比js快很多。
红米K30 Pro(变焦版)
2

老虎会游泳

@Ta / 2022-01-14 / 样 / 源

@Curtion，很遗憾，libheif不是一个直接可用的库，它距离把图片显示在屏幕上还相当遥远，因为<img>标签不支持显示“a Uint8Array containing raw RGB pixels”。<img>标签只能显示封装好的图片格式。所以要把图片真正显示出来，你还必须完成后半段：把a Uint8Array containing raw RGB pixels转换成<img>标签可以显示的图片格式，比如png。最简单的可能是bmp，它几乎就是原始RGB像素，但是依然有一些工作要做。
3

罐子

@Ta / 2022-01-14 / 样 / 源

一加8Pro
4

Curtion

@Ta / 2022-01-14 / 样 / 源

@老虎会游泳，我不明白这个原始RGB数据是什么概念，如果使用Uint8Array创建一个Blob对象，同时指定MIME类型的话，可以显示出图片吗？
红米K30 Pro(变焦版)
5

老虎会游泳

@Ta / 2022-01-14 / 样 / 源

@Curtion，那么你要指定的MIME类型是什么呢？它肯定不是image/png，也不是image/bmp，也不是image/jpeg，更不是image/webp。
6

老虎会游泳

@Ta / 2022-01-14 / 样 / 源

@罐子，已修复大写扩展名不被识别为图片的问题。如果问题依然存在，属于浏览器js缓存。
当然，3楼不会自动变成图片，因为它已经是个链接了。
7

老虎会游泳

@Ta / 2022-01-14 / 样 / 源
@Curtion，原始RGB数据是什么概念：
```
[R, G, B, R, G, B, R, G, B, ...]
```
就这样，从左至右从上到下每个像素的RGB数值。
比如，颜色为#112233的纯色图片会有这样的数据：
```
[0x11, 0x22, 0x33, 0x11, 0x22, 0x33, 0x11, 0x22, 0x33, ...]
```
8

Curtion

@Ta / 2022-01-14 / 样 / 源

@老虎会游泳，明白了
红米K30 Pro(变焦版)
9

老虎会游泳

@Ta / 2022-01-14 / 样 / 源

@Curtion，BMP是最接近原始RGB数据的图片格式，但还是得加一个BMP文件头才行。我会尝试一下。
10

童真再见

@Ta / 2022-01-14 / 样 / 源

第一次知道这种格式。手机试了不会显示
手机
11

老虎会游泳

@Ta / 2022-01-14 / 样 / 源

@童真再见，3楼的图片在手机UC浏览器上要等15秒才能解析好，偶尔还会解析失败不显示，需要刷新才能解析出来。

@Curtion，我觉得我应该先做一下呈现优化，比如解析成功一次后就把结果缓存起来，这样就不必每次打开都等很久了。
13

Curtion

@Ta / 2022-01-14 / 样 / 源

@老虎会游泳，那其实可以首先考虑在上传时进行编码转化工作，存储时就已经是jpg/png了，直接显示的功能可以稍后再做。
红米K30 Pro(变焦版)
14

Curtion

@Ta / 2022-01-14 / 样 / 源

@老虎会游泳，刚才去查了一下，heic支持那么差应该是因为有专利限制，而且解码器需要付费，看来转换成jpeg存储应该是一个好的方法。
红米K30 Pro(变焦版)
15

老虎会游泳

@Ta / 2022-01-14 / 样 / 源

@Curtion，你把3楼显示出来的图片另存为一下看看大小就知道为什么转换存储不可行了。
转换成png是无损，但是特别大。转换成jpeg是可以变小，但是画质差。
而且转换后的jpeg要想画质不是特别垃圾的话，也比原图大很多。
这种图片格式之所以被认为更先进，一定是因为在同等质量下比jpeg小很多。
16

Curtion

@Ta / 2022-01-14 / 样 / 源

@老虎会游泳，那就转成AVIF
红米K30 Pro(变焦版)
17

老虎会游泳

@Ta / 2022-01-14 / 样 / 源

@Curtion，我觉得只要把缓存做好，目前这种解码速度也是可以接受的。它本来就完全显示不出来，如果现在花点时间能让它显示出来，刷新后也能立即看到，那就完全可以了。然后我再去尝试用wasm加速解码。
18

老虎会游泳

@Ta / 2022-01-14 / 样 / 源

@Curtion，AVIF也是有损压缩，你会纠结于质量参数选什么，而且搞不好显示的时候也要用到我正在使用的库。
此外，从一种有损压缩转换为另一种有损压缩一定会损失画质。
19

老虎会游泳

@Ta / 2022-01-14 / 样 / 源

@Curtion，其实吧，可以说前端解码是我唯一可以接受的方案。如果无法实现，我宁愿它只能作为附件下载，不直接显示。现在它已经可以显示了，那我就再也不会退回其他方案了。
20

老虎会游泳

@Ta / 2022-01-14 / 样 / 源

@Curtion，只有一种力量可以让我退回其他方案，就是HEVC的几个专利池跑过来收费。但我记得它们表示非盈利使用不需要交费。而且无论是存储前转码还是存储后转码，都需要交费。所以实际上没有区别。如果它们真的跑来收费，我就退回完全不解码的状态。

添加新回复

回复需要登录。