解决canvas图片getImageData,toDataURL跨域和请求微信头像问题

解决canvas图片getImageData,toDataURL跨域问题

一，canvas getImageData toDataURL跨域问题

通常我们在使用img标签的时候，外链图片资源是不会出现这种情况的。
当我们去是用脚本去加载一张图图片的在不同域的时候就会出现，图片资源的跨域的情况，这其实是浏览器的同源策略。
通常我们只需要在 ，被请求资源的服务器配置一下请求头即可

//如PHP添加响应头信息，*通配符表示允许任意域名：
header("Access-Control-Allow-Origin: *");

或者指定域名：
header("Access-Control-Allow-Origin: www.baidu.com");

二， crossOrigin属性解决资源跨域问题

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

var img = new Image();
img.crossOrigin = '';
img.onload = function () {
    context.drawImage(this, 0, 0);
    context.getImageData(0, 0, this.width, this.height);
};
img.src = 'www.baidu.com/static/123.png';

三，请求微信图片，报错跨域

本来以为问题解决了，但在实际上却又出问题了。
请求30张微信头像，10张请求回来，但是有20张图片资源又报了跨域，当时就懵逼了。抠图值抠了10张。
最后通过在图片资源上加了时间戳就解决了，应该是微信对安全/频率的限制

    
          //定义抠图方法
      getImgData(imgSrc, radius, center = {
        x: 0,
        y: 0
      }) {
        return new Promise((resolve) => {
          const canvas = document.createElement('canvas');
          const contex = canvas.getContext('2d');
          const img = new Image();
          img.crossOrigin = '';
          //添加时间戳
          img.src = imgSrc + "?timeStamp=" +new Date();
          const diameter = 2 * radius;
          if (imgSrc == "") {
            resolve("")
          }
          if (imgSrc == "-1") {
            resolve("-1")
          }
          img.onload = function () {
            canvas.width = diameter;
            canvas.height = diameter;
            contex.clearRect(0, 0, diameter, diameter);
            contex.save();
            contex.beginPath();
            contex.arc(radius, radius, radius, 0, 2 * Math.PI); //画出圆
            contex.clip(); //裁剪上面的圆形
            contex.drawImage(img, center.x - radius, center.y - radius, diameter, diameter, 0, 0, diameter, diameter); // 在刚刚裁剪的园上画图
            contex.restore(); // 还原状态
            resolve(canvas.toDataURL('image/png', 1))
          }
          img.onerror = function () {
            resolve("")
          }
        })
      },