有关Canvas的一点小事—canvas和resize

　　 之前就说了canvas设置大小的时候用的就是设置实打实的像素值，像图像一样设置百分比然后根据浏览器大小自己适应大小是不可能的——当然一般也不会想要cavans改变大小。不过项目之前有用到过，既然去了解了，就记下来防止忘记。

         不能自己适应，就只能每次外部容器发生改变的时候给它重新设置大小了。

1、  $(selector).resize()—布局调整大小的时候触发

　　查了查jquery好像有resize函数，顿时很惊喜，然而发现并没有什么用，它只支持$(window).resize(function(){})；在某些情况这个就够用了，但是之前我明显用不了。

　　刚好查到了一个自定义的resize()函数，但是由于过去有点久，又没有留下记录，不知道是谁的代码了，是基于jq的代码。如下:

//监听div大小变化

(function($, h, c) {

var a = $([]),

e = $.resize = $.extend($.resize, {}),

i,

k = "setTimeout",

j = "resize",

d = j + "-special-event",

b = "delay",

f = "throttleWindow";

e[b] = 250;

e[f] = true;

$.event.special[j] = {

           setup: function() {

                    if (!e[f] && this[k]) {

                             return false;

                    }

                    var l = $(this);

                    a = a.add(l);

                    $.data(this, d, {

                             w: l.width(),

                             h: l.height()

                    });

                    if (a.length === 1) {

                             g();

                    }

           },

           teardown: function() {

                    if (!e[f] && this[k]) {

                             return false;

                    }

                    var l = $(this);

                    a = a.not(l);

                    l.removeData(d);

                    if (!a.length) {

                             clearTimeout(i);

                    }

           },

           add: function(l) {

                    if (!e[f] && this[k]) {

                             return false;

                    }

                    var n;

                    function m(s, o, p) {

                             var q = $(this),

                             r = $.data(this, d);

                             r.w = o !== c ? o: q.width();

                             r.h = p !== c ? p: q.height();

                             n.apply(this, arguments);

                    }

                    if ($.isFunction(l)) {

                             n = l;

                             return m;

                    } else {

                             n = l.handler;

                             l.handler = m;

                    }

           }

};

function g() {

           i = h[k](function() {

                    a.each(function() {

                             var n = $(this),

                             m = n.width(),

                             l = n.height(),

                             o = $.data(this, d);

                             if (m !== o.w || l !== o.h) {

                                       n.trigger(j, [o.w = m, o.h = l]);

                             }

                    });

                    g();

           },

           e[b]);

}

})(jQuery, this);

 

2、  更改canvas的大小

　　canvas.width和canvas.height是canvas本身的属性，可以直接赋值修改。但是修改canvas的大小的同时会导致canvas内容的丢失，你需要保存原本的canvas的信息，然后再将信息放到已经改变好大小的canvas上，有下面两种方法。

　　<1>toDataURL() + new Image() + drawImage()

           获取图像的base64信息，然后利用构造新的图像对象和ctx.drawImage(img, 0, 0, newwidth, newheight)进行缩放,也支持scale()缩放。

　　　　a)不使用scale()

var base64 = c.toDataURL();

c.width=contain.offsetWidth;//父元素的大小

c.height=contain.offsetHeight;

          

var img = new Image();

img.onload = function(){

           ctx.drawImage(img,0,0,c.width,c.height);//进行缩放

}

img.src = base64;

 

　　　　b)使用scale()

var base64 = c.toDataURL();

c.width=contain.offsetWidth;

c.height=contain.offsetHeight;

ctx.scale(c.width/width,c.height/height);//进行缩放，width/height是原canvas的大小

                                      

var img = new Image();

img.onload = function(){

           ctx.drawImage(img,0,0,width,height);

}

img.src = base64;

 

这个方法比较好，但是受同源限制，单单跑html的时候如果想要对加载了图片的canvas进行操作可不行，需要跑到http上。

 

2、getImageData() + putImageData()

保存像素矩阵，然后把像素矩阵放到新画布上，不会缩放，也不受scale()影响。如果要等比例缩放，需要自己对像素矩阵进行操作。同样受同源限制。

 

　　　　　　　　　　　　　　　　　　　　　　　 var data=ctx.getImageData(0,0,width,height);

                                       var base64 = c.toDataURL();

                                       c.width=contain.offsetWidth;

                                       c.height=contain.offsetHeight;

                                       ctx.putImageData(data,0,0);

完整代码：

<!DOCTYPE html>  
<html lang="zh-cn">  
    <head>  
        <meta charset="UTF-8"/>  
        <script src='js/jquery-3.3.1.min.js'></script>
        <script src='js/resize.js'></script>
        <style>
            body{
                //background:black;
                text-align:center;
            }
            #myCanvas{
                background:white;
                border:1px solid black;
            }
            #contain{
                margin:0 auto;
                width:30%;
                height:40px;
                
            }
            #scream{
                width:100%;
            }
            img{
                margin-top:10px;
                border:1px solid red;
            }
            
        </style>
    </head>  
    <body> 
        <div id="contain">
            <canvas id="myCanvas"></canvas>
        </div>
        <script type="text/javascript"> 
            $(document).ready(function(){
                var contain = document.getElementById('contain');
                var c=document.getElementById("myCanvas");
                var ctx=c.getContext("2d");
                c.width=contain.offsetWidth;
                c.height=contain.offsetHeight;//***根据容器大小设置宽和高
                
                /****如果是本地图片绘制的img受同源限制,报错
                var img= new Image();
                img.onload=function(){
                    ctx.drawImage(img,0,0);
                    var data = ctx.getImageData(0,0,2,2);//获取像素点
                    console.log(data);
                    
                }
                img.src="img/6.png";
                //*/
                //****不能用图片展示，画个对角线试试
                ctx.beginPath();
                ctx.moveTo(0,0);
                ctx.lineTo(c.width,c.height);
                ctx.stroke();
                ctx.closePath();
                //容器大小发生改变触发
                $('#contain').resize(function(){
                    var width = c.width;
                    var height = c.height;
                    var data=ctx.getImageData(0,0,width,height);//获取像素点
                    var base64 = c.toDataURL();//获取base64
                    c.width=contain.offsetWidth;
                    c.height=contain.offsetHeight;
                    //ctx.scale(c.width/width,c.height/height);
                    //ctx.putImageData(data,0,0);//放置像素矩阵，不会缩放，超出部分会丢失
                    var img = new Image();
                    img.onload = function(){
                        ctx.drawImage(img,0,0,c.width,c.height);//利用base64图像进行缩放
                        //ctx.drawImage(img,0,0,width,height);
                    }
                    img.src = base64;
                    
                    
                });
                
                
            });
        </script>  
    </body>  
</html>  

 

参考：

同源限制：

https://blog.csdn.net/u013040887/article/details/78986598