html2canvas關于圖片不能正常截取

zsy888 發布于2019-08-23 10:32 / 719人閱讀

摘要：需要前端根據后端傳過來數據，動態的生成圖片。圖片中的文案背景圖片用戶頭像全部都是通過后端的接口獲取。但是有些圖片無論如何都顯示不出來。此時有些許絕望。如果頁面中有其他的也使用了跨源的圖片資源，都不會去讀取。大家可以自行配置取消掉。

問題

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

歡迎光臨個人博客

云服務器 GPU云服務器不能正常 yum不能正常使用不備案域名能不能正常服務器不能正常訪問

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96438.html

實現Google帶截圖功能的web反饋插件

摘要：谷歌是通過來實現這個組件的，比較復雜谷歌的工具加載文件和截圖文件有興趣的同學可以看一下。高亮區域核心部分截圖搞定了，接下來就是高亮區域了。幾乎所有的APP應用包括Web應用都需要一個意見反饋，這樣才能了解用戶對產品的意見和建議，以便于不斷提升完善自己的產品。目前的反饋組件一般有兩種，一種是打開一個反饋頁面填寫表單，另一種則是通過彈窗來完成，相比較而言第二種更加方便，而且更加容易組件化...

freecode 2019-08-22 17:20 評論0 收藏0
JS中實現網頁截圖

摘要：前端頁面中可以使用將整個網頁或一部分區域截取成圖片并導出。目前比較好用的處理方式是先將轉換成，再從中導出圖片。調用，現在我們有了一個對象，下一步是保存到文件中。至此，對網頁中的一部分進行截圖并保存成文件就完成了。前端頁面中可以使用JS將整個網頁或一部分區域截取成圖片并導出。今天剛做了一次這個功能，和大家分享一下經驗。使用html2canvas將dom轉換成canvas 網頁截圖的...

xiaowugui666 2019-08-23 11:49 評論0 收藏0
其實，前端還可以這樣做簡歷

摘要：接下來，亮出自己做的簡歷。登錄進入后，就可以選擇一個你喜歡的簡歷模板進行制作簡歷了。將頁面左邊的工具欄拿掉，然后將簡歷寬度放大到接近瀏覽器寬度即可達到像素最高的效果。此外，會自動保存你做的簡歷，方便下次編輯。以下文章摘自我的博客，原文鏈接下面的簡歷圖片不上傳了，想看的點擊原文鏈接就能看到了。簡述下原理：首先找一個可以在線制作簡歷并提供簡歷模板的網站，然后在模板上填好自己的信息，并...

zhaochunqi 2019-08-20 14:43 評論0 收藏0
我還是踩上了網頁截圖的坑

摘要：最近做了個實現網頁縮略圖的項目，其中不免需要用到網頁截屏。選擇好方案后還是踩了不少坑，第一個就是我得想辦法讓它和通信，不然我沒法通過前端只傳一個需要被截圖的鏈接給就能實現截圖。最近做了個實現網頁縮略圖的項目，其中不免需要用到網頁截屏。一開始想的是看看能不能在前端直接實現截圖，因為Web端的截圖并生成圖片并不算是一個高頻的需求，網上資料自然也不算多，查來查去，發現JavaScript...

jcc 2019-08-20 19:06 評論0 收藏0
網頁應該如何錄屏呢？

摘要：用于將及其狀態轉化為可序列化的數據結構并添加唯一標識則是將記錄的數據結構重建為對應的。用于記錄中的所有變更則是將記錄的變更按照對應的時間一一重放。表示觀察變動時，是否需要記錄變動前的屬性值。該方法返回變動記錄的數組。摘要：網頁應該如何錄屏呢？作者：Winty 原文：用戶行為錄幀調研 Fundebug經授權轉載，版權歸原作者所有。關鍵點首先，每一次會話都有一個唯一的s...

_Suqin 2019-08-26 10:35 評論0 收藏0