同样读取一张600X800的jpg本地图片,页面绑定Image.src的读取显示速度与后台脚本读取差异非常大
后台脚本读取代码:
const canvas = wx.createOffscreenCanvas({type: '2d', width: width, height: height})
const context = canvas.getContext('2d')
const image = canvas.createImage()i
await new Promise(resolve => {
image.onload = resolve
image.src = imageURL
})
context.drawImage(image, 0, 0, width, height)
在华为P50 pro机子上,就是上面 await promise这段多数时候需要2秒以上,而且即使每次读取同样的一张图时间差异也比较大,起码有1秒左右浮动,很不稳定,即使以上代码的OffscreenCanvas换成普通页面的Canvas也一样。而页面image组件绑定src属性则非常快读取解码并显示出来。有哪位大大能帮忙解释一下?或者脚本读取代码怎么优化才能提高读取速度呢?image组件的图片读取与解码的实现是怎样的?是否有利用到native或者硬解码的能力?是否可以暴露出API来供脚本调用?(像HTML image decode?)
可能的原因是OffscreenCanvas的性能问题,它在不同设备上的表现会有很大的差异。另外,使用createImage()方法创建Image对象后,需要等待图片加载完成才能进行绘制,这也会导致一定的延迟。