html2Canvas导出动态图片跨域问题

前端代码:

 upload = () => {
    let _this = this;
    html2canvas(document.getElementById('xx'), {
      useCORS: true,
      allowTaint: false,
      logging: false,
      backgroundColor: 'transparent',
      width: '100%',
      height: '100%',
      scale: 2,
    }).then((canvas) => {
      let url = canvas.toDataURL('image/png', 1.0);
      _this.setState({
        url,
      });
      Toast.hide();
    });
  }

1.设置useCORS为true,支持跨域

2.后端服务器配置Access-Control-Allow-Origin: *,允许跨域
3.然后发现动态图片还是跨域,导致html2Canvas将当前dom节点无法转成图片,按照网上办法,
(1)给图片设置动态时间戳,
(2)给图片设置crossOrigin="anonymous" ,
但是 还是有问题
此时需要后端再设置Cache-Control: no-store, no-cache,不允许 缓存就可以了(至于为啥有缓存就会有跨域问题,目前 我也还没想通 哈哈哈😄)

 

tips:如果用的是阿里oss存储的图片,第三步配置入口不能配置缓存header,需要上传的时候 自己设置,官方case如下地址:

https://www.alibabacloud.com/help/zh/doc-detail/31978.html?spm=a2c5t.11065259.1996646101.searchclickresult.5b8013c4GfC9ry

 

动态图片跨域 最简单的办法就是给base64,就肯定不会跨域啦

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页