img未能正确渲染图片/记录一次html2canvas生成海报底图丢失问题

2021年11月22日 阅读数:3
这篇文章主要向大家介绍img未能正确渲染图片/记录一次html2canvas生成海报底图丢失问题,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

情景提要:

     公司作微信 h5 产品,须要生成海报,就是用了 html2canvas 来进行截图处理,底图和二维码之类的图片资源须要动态生成。html

开发:

     起初使用 background,而后发现固定图片地址是能够显示,但若是经过 js 动态设置 url 生成海报时会出现空白的状况,通过排查,控制台报跨域,因此改为 img 标签,而后设置cross = ‘anonymous’。canvas

<div  className={styles["background-img"]} >
<img className="post-img" crossOrigin="anonymous" src={data.haibao + '?type=cors&time=' + new Date().getTime()} />
</div>

解决跨域后上线,发现部分机型(iphone 6s)会出现海报背景图时有时无,首先考虑是机型问题,但若是是机型问题不该该会出现有时能加载出图片的问题,而型号越新的越不会出现丢失问题,因此考虑是异步问题,img 加载图片资源是异步的,当图片还在下载时,利用 html2canvas 生成时会截取没有加载出来的效果,问题找到了,就是解决方案问题了。跨域

解决方案:

img 有个complete 属性,若是为 true 就加载完毕,因此只要判断 须要加载完毕的 img dom 对应的complete 属性是否全为true就好了,我这边实现的方案是经过setInterval实现,也能够经过 addEventListener 监听 dom 是否渲染完毕实现。微信

 const img = document.getElementsByClassName('post-img')
var timer = setInterval(function() {
let flag = Array.prototype.every.call(img,item=>item.complete)
if (flag) {
callback(img)
clearInterval(timer)
}
}, 50)