html2Canvas导出动态图片跨域问题

最新推荐文章于 2024-08-09 07:13:32 发布

hetingtingisme

最新推荐文章于 2024-08-09 07:13:32 发布

阅读量915

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/hetingtingitsme/article/details/108729804

版权

前端在使用html2Canvas转换DOM为图片时遇到动态图片跨域问题。尝试设置useCORS为true和后端配置Access-Control-Allow-Origin: *未成功。为解决此问题，需要设置图片动态时间戳、crossOrigin属性，并在后端配置Cache-Control以禁止缓存。若使用阿里OSS，需在上传时设置缓存头。将动态图片转为Base64可以避免跨域问题。

摘要由CSDN通过智能技术生成

前端代码：

 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,不允许缓存就