html2canvas圖片跨域問題圖文詳解
更新時(shí)間：2023年03月02日 09:26:34 作者：阿wei程序媛
我們在進(jìn)行圖片保存的時(shí)候經(jīng)常會發(fā)現(xiàn)圖片跨域了,下面下面這篇文章主要給大家介紹了關(guān)于html2canvas圖片跨域問題的相關(guān)資料,需要的朋友可以參考下
今天遇到的一個(gè)需求，就是將自己寫的html內(nèi)容轉(zhuǎn)化成圖片，并下載到本地，功能實(shí)現(xiàn)了，但是有一個(gè)小問題，就是我們后端給我返回的圖片，我下載的時(shí)候拿不到
1.html寫出來的樣式
2.利用html2canvas插件下載下來的圖片
出現(xiàn)的問題：不顯示 后端返回給我的圖片
html2canvas圖片跨域問題,是由于canvas自身的設(shè)計(jì)，加載的是本地的資源，對跨域資源默認(rèn)是不加載的。
3.解決方法
<img :src="sharedata.data.imageUrl" crossorigin="anonymous">
let downimg= ()=>{
setTimeout(()=>{
proxy.$nextTick(()=>{
html2canvas(document.querySelector('#img'),{
useCORS: true
}).then(canvas => {
var url = canvas.toDataURL() //把canvas轉(zhuǎn)成base64
document.querySelector('#downimg').href = url
document.querySelector('#downimg').download = "我的持倉報(bào)告.png"
document.querySelector('#downimg').click()
})
})
},2000)
}重點(diǎn)：
1. img標(biāo)簽的crossorigin="anonymous"
2. useCORS: true
以上2個(gè)屬性缺一不可
通過上面的兩行代碼就能解決html2canvas圖片跨域問題
如果想要了解怎么將html內(nèi)容轉(zhuǎn)化成圖片并進(jìn)行下載，可參考
vue將html內(nèi)容轉(zhuǎn)為圖片并下載到本地
總結(jié)
到此這篇關(guān)于html2canvas圖片跨域問題的文章就介紹到這了,更多相關(guān)html2canvas圖片跨域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JS獲得QQ號碼的昵稱,頭像,生日的簡單實(shí)例，有需要的朋友可以參考一下2013-12-12
這篇文章主要介紹了js仿百度貼吧驗(yàn)證碼特效實(shí)例代碼，有需要的朋友可以參考一下2014-01-01
這篇文章主要為大家詳細(xì)介紹了H5上傳本地圖片并預(yù)覽的實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
微信小程序ajax實(shí)現(xiàn)請求服務(wù)器數(shù)據(jù)及模版遍歷數(shù)據(jù)功能示例
這篇文章主要介紹了微信小程序ajax實(shí)現(xiàn)請求服務(wù)器數(shù)據(jù)及模版遍歷數(shù)據(jù)功能,結(jié)合實(shí)例形式分析了微信小程序ajax調(diào)用及模板wx:for循環(huán)列表渲染相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
js特效,頁面下雪的小例子，需要的朋友可以參考一下2013-06-06
似乎有人覺得用VBS監(jiān)視注冊表很高級？使用了WMI事件而已，跟《用VBS監(jiān)視進(jìn)程創(chuàng)建和刪除》一樣2011-10-10
下面小編就為大家?guī)硪黄猨s模擬百度模糊搜索的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
js實(shí)現(xiàn)一款簡單踩白塊小游戲(曾經(jīng)很火)
本文給大家分享原生js實(shí)現(xiàn)曾經(jīng)很火的一款小游戲—別踩白塊，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-12-12
利用CSS、JavaScript及Ajax實(shí)現(xiàn)圖片預(yù)加載的三大方法
本文主要介紹了利用CSS、JavaScript及Ajax實(shí)現(xiàn)圖片預(yù)加載的三大方法。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
jquery對單選框,多選框,文本框等常見操作小結(jié)
本篇文章主要是對jquery對單選框,多選框,文本框等常見操作進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01