鍍金池/ 問答/HTML5  HTML/ html2Canvas截取圖片，本地圖片可以截取，但是只要是線上的圖片就截取不到

html2Canvas截取圖片，本地圖片可以截取，但是只要是線上的圖片就截取不到為啥？

screenShot () {

  let el = document.body
  let img = this.$refs.img
  html2canvas(el, {
    allowTaint: true,
    useCORS: true,
    onrendered (canvas) {
      let url = canvas.toDataURL()
      img.src = url
      img.style.position = 'fixed'
      img.style.top = '0px'
      img.style.left = '0px'
      img.style.opacity = '0'
    }
  })
}
我本地新建了一個json文件進行訪問讀取，json文件中的圖片鏈接改成本地的是可以截取到，但是一換成線上的鏈接就截取不到圖片，就算是允許跨域的圖片鏈接也是截取不到
回答
編輯回答
尤禮

canvas.toDataURL()時, 圖片地址如果跨域, 需要對導入canvas之前的img對象做設置:

img.crossOrigin = "Anonymous";

參考:
https://developer.mozilla.org...

2018年8月17日 23:26
編輯回答
寫榮

因為你的canvas在畫圖的時候src屬性是沒有獲取到的，你可以打斷點試試，必然是這樣

2017年2月1日 19:49
編輯回答
臭榴蓮

圖片地址可能跨域

2017年12月3日 02:47
編輯回答
不討喜

確保圖片 下載完畢截取試試

2018年5月14日 22:40
編輯回答
晚風眠

設置一個api的參數(shù)就好啦，useCORS: true之前也用過這個方法，但是是和allowTaint一起用的所以沒有效果，后來單獨用途就好啦

2018年2月10日 15:31