html2Canvas截取图片，本地图片可以截取，但是只要是线上的图片就截取不到为啥？

Question

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文件中的图片链接改成本地的是可以截取到，但是一换成线上的链接就截取不到图片，就算是允许跨域的图片链接也是截取不到

Answer 1

设置一个api的参数就好啦，useCORS: true之前也用过这个方法，但是是和allowTaint一起用的所以没有效果，后来单独用途就好啦

Answer 2

canvas.toDataURL()时, 图片地址如果跨域, 需要对导入canvas之前的img对象做设置:

img.crossOrigin = "Anonymous";

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

Answer 3

因为你的canvas在画图的时候src属性是没有获取到的，你可以打断点试试，必然是这样

Answer 4

图片地址可能跨域

Answer 5

确保图片 下载完毕截取试试