html2canvas關於圖片不能正常截取

問題

首先說說遇到了什麼問題。首先有這麼一個需求。須要前端根據後端傳過來數據，動態的生成圖片。圖片中的文案、背景圖片、用戶頭像所有都是經過後端的接口獲取。可是使用 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的 配置 裏面容許加載跨源資源,就能夠了。

2018年8月1日更新

在調試的時候console信息，發現html2canvas自帶的log太多，眼花繚亂的。你們能夠自行配置取消掉。

html2canvas第一個參數就是你須要轉換成canvas的dom節點。第二個參數接受一個對象，裏面就是各類配置文件。配置項能夠看 這裏

{ logging: false }

配置成上面這樣，就能夠取消html2canvas默認開啓的log了。

歡迎光臨 我的博客