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

情景提要：

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

开发：

     起初使用 background，然后发现固定图片地址是可以显示，但如果通过 js 动态设置 url 生成海报时会出现空白的情况，经过排查，控制台报跨域，所以改成 img 标签，然后设置cross = ‘anonymous’。

<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)