又是canvas 跨域问题？

问题描述

问 题

需求是酱紫的：我想用canvas把用户授权后从微信请求过来的图片用canvas画粗来～～～兰后我用canvas.toDataURL('image/png')后他就理所应当的报出了跨域的错。
看了网上的一些解决方案都是：
1.<img crossOrigin="Anonymous"></img>
2.Access-Control-Allow-Origin
3.jsonp之类的

这个链接是同类问题的解决方案

上面这个链接的解决方法将存在微信服务器里面的图片地址的域名变成了自己域名，我这边后端几番疯狂操作配置后还是没有用，咋回事～～沮丧

解决方案

折腾了一个晚上加一个上午终于发现了问题所在 ～～～～解决问题的心情的蓝色的哈哈哈～～～吼开森
先上一波代码

      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格式，所以导致了在手机上显示会报跨域的错。

总结：碰到跨域的图片资源，先将其用canvas绘制出后转成base64格式后放入img容器中，可以有效解决用canvas合成多张图片时引发的跨域问题～～～～～

谢谢楼上大神们的帮助～～～感谢感谢～～～开心到想来一段freestyle呢

这篇关于又是canvas 跨域问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！