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;
        });
      };
    },

Logo

汇聚全球AI编程工具,助力开发者即刻编程。

更多推荐