canvas 图片跨域（二）

在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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>测试canvas跨域</title>
</head>
<body>
<center>
    <h1>测试canvas跨域</h1>
    <div id="box">

    </div>
    <img src="" alt="" class="img_base64"/>
</center>
</body>
<script src="./jquery.js"></script>
<script>

   $(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']
            }
        };
</script>
</html>

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

canvas 图片跨域（二）

猜你喜欢