canvas渲染远程图片跨域处理，nginx配置

最新推荐文章于 2026-06-19 09:23:49 发布

原创最新推荐文章于 2026-06-19 09:23:49 发布 · 458 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#nginx #前端 #linux

收录于

   location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    {
     #允许跨域
        add_header Access-Control-Allow-Origin '*';
        add_header Access-Control-Allow-Headers X-Requested-With;
        add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
        expires      30d;
        error_log /dev/null;
        access_log /dev/null;
    }

如果是在宝塔，找到服务端代码点击站点查看配置文件即可，前三行

html2canvas渲染canvas海报转成图片时报错问题

// dataUrl     是最终效果图 this.info.image是图片路径，我们这里是相对路径所以加了根域名
captureCanvas() {
      console.log(222);
      // 选择你想要转换成图片的 DOM 元素
      const element = this.$refs.myElement;
      console.log(element, 123);
      let image = new Image();
      image.src = this.baseImageUrl + this.info.image;
      image.crossOrigin = "Anonymous"; // 支持跨域图片
      image.onload = ()=> {
        html2canvas(element, {
          useCORS: true,
        }).then((canvas) => {
          // canvas.toDataURL() 可以获取图片的 base64 编码
          const dataUrl = canvas.toDataURL();
          // 你可以将 dataUrl 设置为一个 img 标签的 src 属性，或者下载图片等
          console.log(dataUrl);
          this.url = dataUrl;
        });
      };
    },