如何降低图片解码(Image Decode)时间？

[xiaoming1992]

伪代码如下：

// 分别有 36 张不同的图片，尺寸均为 2000*1000
const imgList1 = []
const imgList2 = []
const imgList3 = []

function render() {
  // i 会变化
  ctx.drawImage(imgList1[i], ...params)
  ctx.drawImage(imgList2[i], ...params)
  ctx.drawImage(imgList3[i], ...params)

  window.requestAnimationFrame(render)
}

render()

一个渲染循环大概 60ms，但是 Image Decode 就占据了 48ms，怎么能降低这个时间呢？明天上班上 demo 页。

[janus77]

分块并缓存，多分辨率，不同缩放度使用不同分辨率
具体的看一下百度地图就明白了

[CallMeReznov]

扔给 api?

[xiaoming1992]

@mxT52CRuqR6o5 @janus77 现在的性能瓶颈是在旋转的时候，同时需要绘制 3 层图片，我令其只绘一层，性能好了，但是用户转的时候只能看到一层，因此体验不好。


@CallMeReznov 有这样的 api 吗？

[mxT52CRuqR6o5]

@xiaoming1992 大概听明白了，你可以多开 3 个 canvas 叠一起，这样绘制底层图片时即使为了性能不去刷新上面两层图片也不至于把上面的图层清掉，雪碧图也是个思路(就是手机上可能会炸)

[mxT52CRuqR6o5]

感觉可以把 3 个图层每个角度的图片 3 张图片合成 1 张图啊，如果上面图层元素的位置不变的话

[xiaoming1992]

@mxT52CRuqR6o5 本来就是三个 canvas 叠在一起，转的时候加载第二个“3 张图片”时需要解码，频道更换“3 张图片”导致解码耗时。而由于特殊原因，没办法将“3 张图片”合成为一张。

[mxT52CRuqR6o5]

@xiaoming1992 雪碧图方案或 video 方案呢？

[xiaoming1992]

@mxT52CRuqR6o5 开始总没放在心上，总感觉雪碧图太大了，仔细一想，才 12000*6000，或许浏览器能抗住，晚些试试

[xiaoming1992]

@mxT52CRuqR6o5 video 应该不行吧？需要响应用户交互，video 的“播放到某个时刻”的 api 不太熟悉，好像有兼容性问题，况且还设计到缩放

[mxT52CRuqR6o5]

@xiaoming1992 响应交互是 video 如果要播放声音，需要交互才能执行 element.play，你把 video 设成静音就不影响

[seakingii]

@mxT52CRuqR6o5 他这个是要用鼠标控制旋转缩放的,就像一个游戏一样,不能使用视频来解决(如果光是固定的展示效果是可以用编程生成视频的方式)

解码是真的没必要在 渲染循环里做,可以把解码结果缓存起来.

[zhw2590582]

没看懂，是从 url 下载图片，然后把图片陆续插入到 canvas 里是吗？

[mxT52CRuqR6o5]

@seakingii 我知道，我是想通过 js 控制 video 元素的进度来展示不同角度的图片，没实际调研过不知道效果如何

[seakingii]

@mxT52CRuqR6o5 视频不能缩放啊,还讲什么效果...

[mxT52CRuqR6o5]

@seakingii 你控制 video 的 css 属性不就能缩放了

[xiaoming1992]

@mxT52CRuqR6o5 大哥，我要缩放(滚动滚轮或者手指捏合缩放)，可是视频不方便缩放啊，我需要交互，你却告诉我怎么样禁用交互。。。

@seakingii 我也不想解码啊，是调用 drawImage 的时候浏览器被动解码啊。。。

@zhw2590582 是的

[zhw2590582]

假如是我做的话，还是考虑使用缩略图，像那些三维软件那样，当静止时就渲染大图，发生缩放或者转动时就使用缩略图，动作结束后再大图，而不是全程都是大图。

[zhw2590582]

不过你图片量又不大，全部大图 60ms 我觉得可以接受

[xiaoming1992]

@zhw2590582 嗯嗯，缩略图是个方向，我试试，谢谢。

[xiaoming1992]

@zhw2590582 60ms 确实不大，但是当转速高了(20 帧每秒)之后，感觉就有些卡顿了。