如何解决html2canvas.js图片跨域问题

vue2 使用html2canvas.js
在使用html2canvas将页面生成图片时，从后端取的图片在画图时会出现跨域的报错，从网上查的是需要设置 useCORS: true, img标签加上crossOrigin="anonymous"，后端设置Access-Control-Allow-Origin: *。按照这个设置之后图片显示不出来报跨域

img


img


报错的图片也是相应不出来

img


请问怎么解决一下
部分代码如下

             <img
              :src="informationList.headImgUrlNew"
              width="95%"
              alt=""
              crossOrigin="anonymous"
            />

      html2canvas(this.$refs.imageForm, {
        // 获取宽高
        width: this.$refs.imageForm.clientWidth,
        height: this.$refs.imageForm.clientHeight,
        // 图片跨域
        useCORS: true,
      }).then((canvas) => {
        const dataURL = canvas.toDataURL("image/png");
      });

<img :src="informationList.headImgUrlNew+'?'+new Date().getTime()" crossOrigin="anonymous">

src加个时间戳试试，我这样处理是可以的

  • 给你找了一篇非常好的博客，你可以看看是否有帮助，链接：解决vue使用html2canvas的截图不完全问题
  • 除此之外, 这篇博客: vue 使用html2canvas实现图片合成，将两张图片合成一张,并下载海报中的 最后 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • 整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

    有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

    部分文档展示：



    文章篇幅有限，后面的内容就不一一展示了

    有需要的小伙伴，可以点下方卡片免费领取