欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時(shí)間:2018-07-31 14:52:26   作者:detectiveHLH   我要評(píng)論
圖片中的文案、背景圖片、用戶頭像全部都是通過(guò)后端的接口獲取。但是使用 html2canvas 生成的canvas有些圖片成功的在canvas里生成了。但是有些圖片無(wú)論如何都顯示不出來(lái),這篇文章主要介紹了html2canvas關(guān)于圖片不能正常截取的解決方案,感興趣的小伙伴們可以參考一下

問(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<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é)翻譯一下。英語(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的 配置 里面允許加載跨源資源,就可以了。

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

相關(guān)文章

  • html2canvas 將html代碼轉(zhuǎn)為圖片的使用方法

    html2canvas,這是一個(gè)非常著名的從瀏覽器網(wǎng)頁(yè)截圖的開(kāi)源庫(kù),使用很方便,功能也很強(qiáng)大。這篇文章給大家介紹html2canvas 將html代碼轉(zhuǎn)為圖片的使用方法,感興趣的朋友跟隨
    2018-05-16
  • html2canvas把div保存圖片高清圖的方法示例

    這篇文章主要介紹了html2canvas把div保存圖片高清圖的方法示例的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-03-05
  • 詳解html2canvas截圖不能截取圓角圖片的解決方案

    這篇文章主要介紹了詳解html2canvas截圖不能截取圓角圖片的解決方案的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-01-30

最新評(píng)論