html2canvas關(guān)于圖片不能正常截取的解決方案

問題

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

官方文檔

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

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.

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

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

解決方案

對靜態(tài)資源做一次轉(zhuǎn)發(fā)并且在html2canvas的 配置 里面允許加載跨源資源,就可以了。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。