問題

首先說說遇到了什么問題。首先有這么一個需求。需要前端根據后端傳過來數據，動態的生成圖片。圖片中的文案、背景圖片、用戶頭像全部都是通過后端的接口獲取。但是使用 html2canvas 生成的canvas有些圖片成功的在canvas里生成了。但是有些圖片無論如何都顯示不出來。

官方文檔

在項目里面操作了半天未果，google了半天未果。此時有些許絕望。突然想到了，為什么不去它的 官網 看看呢。于是乎我在官網上看到了下面的內容。

Limitations<br/>
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.<br/>
The script doesn't render plugin content such as Flash or Java applets.

講的啥呢，這里為英文不好的同學翻譯一下。英語好的可以直接看上文。大概的意思就是在html2canvas里面，是使用腳本去操作的，也就是說使用腳本把html轉換成canvas，但是有一個限制，那就是不能使用跨源的圖片。如果使用了，html2canvas將不會讀取資源。

這也就是為什么轉換出來的canvas有些圖片一直是空白的原因。如果頁面中有其他的canvas也使用了跨源的圖片資源，html2canvas都不會去讀取。

解決方案

對靜態資源做一次轉發并且在html2canvas的 配置 里面允許加載跨源資源,就可以了。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。