問題
首先說說遇到了什么問題。首先有這么一個需求。需要前端根據后端傳過來數據，動態的生成圖片。圖片中的文案、背景圖片、用戶頭像全部都是通過后端的接口獲取。但是使用 html2canvas 生成的canvas有些圖片成功的在canvas里生成了。但是有些圖片無論如何都顯示不出來。
官方文檔
在項目里面操作了半天未果，google了半天未果。此時有些許絕望。突然想到了，為什么不去它的 官網 看看呢。於是乎我在官網上看到了下面的內容。
Limitations
All the images that the script uses need to reside under the same origin for it to be able to read them without the assistance of a proxy. Similarly, if you have other canvas elements on the page, which have been tainted with cross-origin content, they will become dirty and no longer readable by html2canvas.
The script doesn't render plugin content such as Flash or Java applets.
講的啥呢，這里為英文不好的同學翻譯一下。英語好的可以直接看上文。大概的意思就是在html2canvas里面，是使用腳本去操作的，也就是說使用腳本把html轉換成canvas，但是有一個限制，那就是不能使用跨源的圖片。如果使用了，html2canvas將不會讀取資源。
這也就是為什么轉換出來的canvas有些圖片一直是空白的原因。如果頁面中有其他的canvas也使用了跨源的圖片資源，html2canvas都不會去讀取。
解決方案
對靜態資源做一次轉發並且在html2canvas的 配置 里面允許加載跨源資源,就可以了。
2018年8月1日更新
在調試的時候console信息，發現html2canvas自帶的log太多，眼花繚亂的。大家可以自行配置取消掉。
html2canvas第一個參數就是你需要轉換成canvas的dom節點。第二個參數接受一個對象，里面就是各種配置文件。配置項可以看 這里
{ logging: false }
配置成上面這樣，就可以取消html2canvas默認開啟的log了。