在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']

            }

        };

我为人人，人人为我；美美与共，天下大同；