亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

html2canvas圖片跨域問題圖文詳解

 更新時間：2023年03月02日 09:26:34   作者：阿wei程序媛  
我們在進行圖片保存的時候經(jīng)常會發(fā)現(xiàn)圖片跨域了,下面下面這篇文章主要給大家介紹了關(guān)于html2canvas圖片跨域問題的相關(guān)資料,需要的朋友可以參考下

今天遇到的一個需求，就是將自己寫的html內(nèi)容轉(zhuǎn)化成圖片，并下載到本地，功能實現(xiàn)了，但是有一個小問題，就是我們后端給我返回的圖片，我下載的時候拿不到

1.html寫出來的樣式

2.利用html2canvas插件下載下來的圖片

出現(xiàn)的問題：不顯示 后端返回給我的圖片

html2canvas圖片跨域問題,是由于canvas自身的設(shè)計，加載的是本地的資源，對跨域資源默認是不加載的。

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 = "我的持倉報告.png"
        document.querySelector('#downimg').click()
      })
    })
  },2000)
}

重點：

1. img標簽的crossorigin="anonymous"

2. useCORS: true

以上2個屬性缺一不可

通過上面的兩行代碼就能解決html2canvas圖片跨域問題

如果想要了解怎么將html內(nèi)容轉(zhuǎn)化成圖片并進行下載，可參考

vue將html內(nèi)容轉(zhuǎn)為圖片并下載到本地

總結(jié)

到此這篇關(guān)于html2canvas圖片跨域問題的文章就介紹到這了,更多相關(guān)html2canvas圖片跨域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論