前端小laji 2023-06-01 17:09 采纳率: 50%
浏览 42
已结题

如何解决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");
      });
  • 写回答

2条回答 默认 最新

  • 前端-杏 2023-06-01 17:30
    关注
    <img :src="informationList.headImgUrlNew+'?'+new Date().getTime()" crossOrigin="anonymous">
    
    

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 6月13日
  • 已采纳回答 6月5日
  • 创建了问题 6月1日

悬赏问题

  • ¥100 网页游戏在本地页面修改游戏结果
  • ¥30 comfyui openpose报错
  • ¥20 Wpf Datarid单元格闪烁效果的实现
  • ¥15 图像分割、图像边缘提取
  • ¥15 sqlserver执行存储过程报错
  • ¥100 nuxt、uniapp、ruoyi-vue 相关发布问题
  • ¥15 浮窗和全屏应用同时存在,全屏应用输入法无法弹出
  • ¥100 matlab2009 32位一直初始化
  • ¥15 Expected type 'str | PathLike[str]…… bytes' instead
  • ¥15 三极管电路求解,已知电阻电压和三级关放大倍数