成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

zsy888 / 835人閱讀

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

問題

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

官方文檔

在項(xiàng)目里面操作了半天未果，google了半天未果。此時有些許絕望。突然想到了，為什么不去它的 官網(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é)翻譯一下。英語好的可以直接看上文。大概的意思就是在html2canvas里面，是使用腳本去操作的，也就是說使用腳本把html轉(zhuǎn)換成canvas，但是有一個限制，那就是不能使用跨源的圖片。如果使用了，html2canvas將不會讀取資源。

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

解決方案

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

2018年8月1日更新

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

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

{ logging: false }

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

歡迎光臨 個人博客

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/96438.html

相關(guān)文章

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

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

    freecode 評論0 收藏0

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

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

    xiaowugui666 評論0 收藏0

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

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

    zhaochunqi 評論0 收藏0

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

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

    jcc 評論0 收藏0

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

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

    _Suqin 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<