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)