在canvas 图片跨域（一）中，关于canvas跨域问题进行处理，提供的方法是后端提供base64文件资源，既把oss（图片URL）,抓取到服务器，然后返回给客户端。
但上线以后，出现了很严重的问题，既资源占用太大。
海报的生成 需要后端提供base64的资源，后端php解决办法三种：
1.每次需要的时候，curl 抓取路径的资源转为bse64
2.只抓取一次，存入DB
3.只抓取一次，存入redis
分析：
方法优点缺点
Curl不需要考虑base64的存储消耗服务器内存
数据库存储存储量大，成本低读取时，消耗IO,降低mysql的吞吐效率
Redis访问速度快不易存储大数据，成本较高
注：前端canvas把url转为base64，存在跨域问题
上述方法，一方面消耗大量服务端资源，另一方面服务端为了抗住这么大的消耗要不断的加大配置，用钱来解决硬件的瓶颈。
下面首先了解，跨域问题。下文摘自阿里云
可以理解为，网站A想共享网站B的资源，但是为了安全，是不让获取的。但是 B网站（oss图片存储），可以设置跨域规则，允许一部分人来跨域访问，
注：设置完成之后，浏览器可能有缓存，需要清理一下。
附：图片url 转为base64
测试canvas跨域
测试canvas跨域
$(function(){
//这是网上的一张图片链接
var url="https://test-zyhuadu.oss-cn-beijing.aliyuncs.com/test02M.jpg?x-oss-process=style/_p";
//var url="https://test-zyhuadu.oss-cn-beijing.aliyuncs.com/test02M.jpg";
getBase64(url).then(function(base64){
$('#box').html(base64);
$('.img_base64').attr('src',base64);
},function(err){
console.log(err);//打印异常信息
});
});
//传入图片路径，返回base64
function getBase64(img){
function getBase64Image(img,width,height) {//width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
var canvas = document.createElement("canvas");
canvas.width = width ? width : img.width;
canvas.height = height ? height : img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
var dataURL = canvas.toDataURL();
return dataURL;
}
var image = new Image();
image.crossOrigin = '';
image.src = img;
var deferred=$.Deferred();
if(img){
image.onload =function (){
deferred.resolve(getBase64Image(image));//将base64传给done上传处理
}
return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
}
};
我为人人，人人为我；美美与共，天下大同；
