解决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("")
}
})
},
