問題

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

官方文檔

在項目里面操做了半天未果，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.git

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

這也就是為何轉換出來的canvas有些圖片一直是空白的緣由。若是頁面中有其余的canvas也使用了跨源的圖片資源，html2canvas都不會去讀取。canvas

解決方案

對靜態資源作一次轉發而且在html2canvas的 配置 里面容許加載跨源資源,就能夠了。后端

2018年8月1日更新

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

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

{ logging: false }

復制代碼

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

歡迎光臨 我的博客ide

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的html2canvas图片不能正常截取,html2canvas关于图片不能正常截取的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。