html2canvas關於圖片不能正常截取

問題

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

歡迎光臨 我的博客