成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

html2canvas關(guān)于圖片不能正常截取

zsy888 / 734人閱讀

摘要：需要前端根據(jù)后端傳過(guò)來(lái)數(shù)據(jù)，動(dòng)態(tài)的生成圖片。圖片中的文案背景圖片用戶頭像全部都是通過(guò)后端的接口獲取。但是有些圖片無(wú)論如何都顯示不出來(lái)。此時(shí)有些許絕望。如果頁(yè)面中有其他的也使用了跨源的圖片資源，都不會(huì)去讀取。大家可以自行配置取消掉。

問(wèn)題

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

官方文檔

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

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.

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

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

解決方案

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

2018年8月1日更新

在調(diào)試的時(shí)候console信息，發(fā)現(xiàn)html2canvas自帶的log太多，眼花繚亂的。大家可以自行配置取消掉。

html2canvas第一個(gè)參數(shù)就是你需要轉(zhuǎn)換成canvas的dom節(jié)點(diǎn)。第二個(gè)參數(shù)接受一個(gè)對(duì)象，里面就是各種配置文件。配置項(xiàng)可以看 這里

{ logging: false }

配置成上面這樣，就可以取消html2canvas默認(rèn)開啟的log了。

歡迎光臨 個(gè)人博客

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96438.html

相關(guān)文章

  • 實(shí)現(xiàn)Google帶截圖功能的web反饋插件

    摘要：谷歌是通過(guò)來(lái)實(shí)現(xiàn)這個(gè)組件的，比較復(fù)雜谷歌的工具加載文件和截圖文件有興趣的同學(xué)可以看一下。高亮區(qū)域核心部分截圖搞定了，接下來(lái)就是高亮區(qū)域了。 幾乎所有的APP應(yīng)用包括Web應(yīng)用都需要一個(gè)意見(jiàn)反饋，這樣才能了解用戶對(duì)產(chǎn)品的意見(jiàn)和建議，以便于不斷提升完善自己的產(chǎn)品。目前的反饋組件一般有兩種，一種是打開一個(gè)反饋?lái)?yè)面填寫表單，另一種則是通過(guò)彈窗來(lái)完成，相比較而言第二種更加方便，而且更加容易組件化...

    freecode 評(píng)論0 收藏0

  • JS中實(shí)現(xiàn)網(wǎng)頁(yè)截圖

    摘要：前端頁(yè)面中可以使用將整個(gè)網(wǎng)頁(yè)或一部分區(qū)域截取成圖片并導(dǎo)出。目前比較好用的處理方式是先將轉(zhuǎn)換成，再?gòu)闹袑?dǎo)出圖片。調(diào)用，現(xiàn)在我們有了一個(gè)對(duì)象，下一步是保存到文件中。至此，對(duì)網(wǎng)頁(yè)中的一部分進(jìn)行截圖并保存成文件就完成了。 前端頁(yè)面中可以使用JS將整個(gè)網(wǎng)頁(yè)或一部分區(qū)域截取成圖片并導(dǎo)出。 今天剛做了一次這個(gè)功能，和大家分享一下經(jīng)驗(yàn)。 使用html2canvas將dom轉(zhuǎn)換成canvas 網(wǎng)頁(yè)截圖的...

    xiaowugui666 評(píng)論0 收藏0

  • 其實(shí)，前端還可以這樣做簡(jiǎn)歷

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

    zhaochunqi 評(píng)論0 收藏0

  • 我還是踩上了網(wǎng)頁(yè)截圖的坑

    摘要：最近做了個(gè)實(shí)現(xiàn)網(wǎng)頁(yè)縮略圖的項(xiàng)目，其中不免需要用到網(wǎng)頁(yè)截屏。選擇好方案后還是踩了不少坑，第一個(gè)就是我得想辦法讓它和通信，不然我沒(méi)法通過(guò)前端只傳一個(gè)需要被截圖的鏈接給就能實(shí)現(xiàn)截圖。 最近做了個(gè)實(shí)現(xiàn)網(wǎng)頁(yè)縮略圖的項(xiàng)目，其中不免需要用到網(wǎng)頁(yè)截屏。 一開始想的是看看能不能在前端直接實(shí)現(xiàn)截圖，因?yàn)閃eb端的截圖并生成圖片并不算是一個(gè)高頻的需求，網(wǎng)上資料自然也不算多，查來(lái)查去，發(fā)現(xiàn)JavaScript...

    jcc 評(píng)論0 收藏0

  • 網(wǎng)頁(yè)應(yīng)該如何錄屏呢？

    摘要：用于將及其狀態(tài)轉(zhuǎn)化為可序列化的數(shù)據(jù)結(jié)構(gòu)并添加唯一標(biāo)識(shí)則是將記錄的數(shù)據(jù)結(jié)構(gòu)重建為對(duì)應(yīng)的。用于記錄中的所有變更則是將記錄的變更按照對(duì)應(yīng)的時(shí)間一一重放。表示觀察變動(dòng)時(shí)，是否需要記錄變動(dòng)前的屬性值。該方法返回變動(dòng)記錄的數(shù)組。 摘要： 網(wǎng)頁(yè)應(yīng)該如何錄屏呢？ 作者：Winty 原文：用戶行為錄幀調(diào)研 Fundebug經(jīng)授權(quán)轉(zhuǎn)載，版權(quán)歸原作者所有。 關(guān)鍵點(diǎn) 首先，每一次會(huì)話都有一個(gè)唯一的s...

    _Suqin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<