canvas 图片跨域处理,图片不显示，图片空白

    getWeChatUserHeadImg () {
        var picurl = this.headImg
        var img = new Image()
        var that = this
        var canvas = document.createElement('CANVAS')
        var ctx = canvas.getContext('2d')
        img.crossOrigin = 'Anonymous' //这是是需要加的
        img.onload = function () {
          canvas.height = img.height
          canvas.width = img.width
          ctx.drawImage(img, 0, 0)
          var dataURL = canvas.toDataURL('image/png')
          canvas = null
          that.testImg = dataURL
          that.config.imagePath = dataURL
        }
        img.src = picurl
      },

问题出在我用了vue-qart的库，其中需要传一个叫图片路径值，也就是config.imagePath，一开始我只是将微信头像的原地址直接用新建图片对象的方法加载并设置了img.crossOrigin = ‘Anonymous’，之后再把src路径赋值给了config.imagePath,并没有把地址转化成base64格式，所以导致了在手机上显示会报跨域的错。

有几点需要注意的：

为了方便解释，你本地的服务器主机为aaaa，远程主机为xxxx。
假设你的后端成功转发了http://xxxx/pic.png，那么你从浏览器应该是可以访问到http://aaaa/pic.png的。如果你成功用本地主机地址打开了转发的图片，说明你代理转发已经成功。
另外，代理转发成功并不代表可以跨域，需要给代理转发的返回数据写上返回头Access-Control-Allow-Origin: aaaa或者Access-Control-Allow-Origin: *。
注意你链接代码中的两个地方，首先是src = picurl.replace(“http://wx.qlogo.cn“,”//wq.jd.com”);，这里需要将远程图片地址的主机xxxx替换成你自己的主机名aaaa；
第二个要注意的是img.crossOrigin = “Anonymous”;，要给创建的img对象crossOrigin属性赋值。
我觉得你有可能出现问题的地方：
路由转发不成功
忘记给返回数据加Access-Control-Allow-Origin返回头
忘记在JS代码中将xxxx替换为aaaa，由于仍然是访问的xxxx主机上的图片（远程主机不支持跨域），所以跨域问题仍然存在
Nginx参考配置

location ^~ /wechat_image/ {
  add_header 'Access-Control-Allow-Origin' "$http_origin" always;
  add_header 'Access-Control-Allow-Credentials' 'true' always;
  add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;
  add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;

  proxy_pass http://wx.qlogo.cn/;
}

然后将微信的头像 http://wx.qlogo.cn/xxx => http://${自己的域名}/wechat_image/xxx

canvas 图片跨域处理,图片不显示，图片空白

有几点需要注意的：

猜你喜欢