向 V 友们请教一个技术问题, HEIC 如何更方法的在 web 中应用 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
wqkenqing
V2EX    程序员

向 V 友们请教一个技术问题, HEIC 如何更方法的在 web 中应用

  •  
  •   wqkenqing 278 天前 1747 次点击
    这是一个创建于 278 天前的主题,其中的信息可能已经有所发展或是发生改变。

    V 友们,我遇到一个技术问题,想请教一下。因为我有较多的图片在我的 nas 中,我想较好的利用起我的图片,就要更方便的能够访问,我调研了较多的相册软件,都不是很满意,所以我打算自己写一个相册,目前架构是 b/s 结构。目前主体已成,但还有一些问题,其中比较困扰一个就是,我用 iphone 拍的照片出来是 HEIC 的格式,目前的 img 标签是不能直接支持该格式,所以处理方式是进行解码,有两种方案,一种是前端解,一种是后端解,但我现在用前端解,用的是 heic2any 库,总得来说解析加载性能不佳,加载比较慢。 后端解目前的思路是把 HEIC 事先转成其它格式,但这会造成存储冗余,我不是很想删掉原有的 HEIC 文件,所以想请教一下 V 友们,在我现有的需求下,有没有更好的方案。

    第 1 条附言    277 天前
    最后我选择的方案是后端即时转码进行处理,因为分页加载每页的图片数不太多,在获取到 HEIC 文件的请求后,再把相应的请求分发到计算服务,并通过多线程进行处理,尽量提高转码的速度,实际上还是有比较明显的延迟,但目前应用于我个人相册这个场景来说,还是能够接受,目前分析还有优化空间,但应该暂时不会调整方向。
    13 条回复    2025-01-08 23:21:13 +08:00
    heimoshuiyu
        1
    heimoshuiyu  
       278 天前
    photoprism 不是支持 heic 吗,元数据也能读
    hrdom
        2
    hrdom  
       278 天前
    https://v2ex.com/t/980870
    “解析加载性能不佳” 无解
    “存储冗余” 只生成缩略图?
    hrdom
        3
    hrdom  
       278 天前
    或者你写一个硬解 heic 的库哈哈,我可以支持 200 元
    KagurazakaNyaa
        4
    KagurazakaNyaa  
       278 天前
    https://www.npmjs.com/package/libheif-js 考虑用 wasm 方式编解码,也许性能会有所改善
    FlashEcho
        5
    FlashEcho  
       278 天前
    换 safari ,可以原生支持 heic
    mxT52CRuqR6o5
        6
    mxT52CRuqR6o5  
       278 天前
    看了下 heic2any 是用 libheif 的 js 版本单 worker 单线程软解的,可以尝试改造成用 wasm 版本,且改造成多 worker 多线程充分利用多核能力
    后端转换也可以尝试现转不进行冗余存储,native 运行肯定比 js/wasm 率高的(也更容易调用硬件解码),具体得看你的服务器性能了
    wwwap
        7
    wwwap  
       278 天前
    我之前研究过,答案就是目前 web 没有 能正常显示 且 不存储 冗余的方案。
    因为 heic/avif/jxr 等等 支持 HDR 的 在 desktop/mobile 平台,不同环境 firefox/safari/chrome 内的支持情况 都不相同。
    wwwap
        8
    wwwap  
       278 天前
    总的来说,如果你想 以 比如 heic 这种为源文件,web 上能正常显示,需要一套完整系统,而且这套系统 在不同平台上的效果不一致。
    比如,桌面端 chrome 支持 hdr ,但是绝大多数安卓 chrome 不支持 hdr 图片,你要为这些不支持 HDR 的准备 SDR 的图片。
    等等 一系列问题。
    IvanLi127
        9
    IvanLi127  
       278 天前
    我选择临时冗余。按需转码,LRU 缓存策略淘汰。

    用的是这个项目 https://github.com/cshum/imagor
    wqkenqing
        10
    wqkenqing  
    OP
       278 天前
    我目前看了一下,也偏向这个方案,就是返回 HEIC 格式的图片的时候,现转一遍,我的服务器性能很拉,家里用 14 款 dell 双核笔记本在当服务器。
    wqkenqing
        11
    wqkenqing  
    OP
       278 天前
    @heimoshuiyu 打算用自己写的相册服务,因为调研了一圈开源相册都不是很满意,不过你说的这款确实没用过。我用过 pichome,Jellyfin,qumagie 等一些。使用起来都还是挺不舒服的,我自己写的这个相册,我是需要什么需求,我就自己去实现。
    wqkenqing
        12
    wqkenqing  
    OP
       278 天前
    @IvanLi127 感谢分享,我目前也比较倾向临时冗余,我去看看你这个方案。我自己的现在的思路的话,就是加一个高性能的计算节点,对加载 HEIC 的图片时,在后端进行现转,这样可以通过多线程等方式来处理实现。
    winterpotato
        13
    winterpotato  
       277 天前
    你可能需要 WebP Server Go :-) https://github.com/webp-sh/webp_server_go

    当然如果更进一步,用托管的 WebP Cloud 可能更好 https://webp.se
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     2900 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 23ms UTC 14:07 PVG 22:07 LAX 07:07 JFK 10:07
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86