模仿微信红包模糊照片

看到微信红包照片，以及慕课网制作红包照片的启发特意用原生js写了个红包照片组件

效果图

    
    
    



    

        
        
        
显示全部
    
    

        
        
        
显示全部
    

pictureblur.js

(function(){


    var picblur = function(){}


    picblur.prototype.init = function(selector){    
        this.is_first = true;
        var picblur=this;
        var imgbox = document.querySelectorAll(selector);
        var win_width = document.body.offsetWidth;
        doFn(imgbox,function(imgb){
            imgb.style.width=win_width>650?"650px":win_width+"px";
        });
        doFn(getDom(imgbox,"CANVAS"),function(canvas){    //canvas高宽设置
            var clipRegion = getRandowRegion(canvas);
            var img = getDom(canvas.parentNode,"IMG")[0];
            canvas.setAttribute("data-region",JSON.stringify(clipRegion));
            canvas.height=img.width/img.naturalWidth*img.naturalHeight;
            canvas.width=img.width;
            drawImg.call(picblur,canvas,clipRegion);
       });
        doFn(getDom(imgbox,"DIV"),function(div){    //绑定点击事件
          div.addEventListener("click",showAll,false);
       });
    }




    function showAll(){     //显示全图
        doFn(getDom(this.parentNode,"CANVAS"),function(canvas){
            var clipRegion=JSON.parse(canvas.getAttribute("data-region"));
            this.style.visibility="hidden";
            var showall = setInterval(function(){
                clipRegion.r+=15;
                drawImg(canvas,clipRegion);
                if(clipRegion.r>canvas.width&&clipRegion.r>canvas.height){
                    clearInterval(showall);
                }
            }.bind(this),30);
        }.bind(this));
    }


    function drawImg(canvas,clipRegion){        //画出圆形清晰区域
        var context = canvas.getContext("2d");
        var img = getDom(canvas.parentNode,"IMG")[0];
            img.onload = toDraw;
            toDraw();
            function toDraw(){
                context.clearRect(0,0,canvas.width,canvas.height);
                context.save();
                context.beginPath();
                context.arc(clipRegion.x,clipRegion.y,clipRegion.r,0,2*Math.PI,false);
                context.clip();
                context.drawImage(img,0,0,canvas.width,canvas.height);
                context.restore();
            }
    }


    function getRandowRegion(canvas){   //随机区域
        var rand = {x:0,y:0,r:40}
        rand.x = Math.random()*(canvas.width-rand.r*2)+rand.r;
        rand.y = Math.random()*(canvas.height-rand.r*2)+rand.r;
        return rand;
    }


    function getDom(dom_parent,tagname){    //根据tagname获取dom节点
       var dom=[];
       if(dom_parent.length){   //判断传入是dom节点还是dom数组
       for(var i in dom_parent){
            for(var n in dom_parent[i].childNodes){
                if(dom_parent[i].childNodes[n].tagName==tagname){
                    dom.push(dom_parent[i].childNodes[n]);
                }else{
                    continue;
                }
            }
        }
        }else{
            for(var n in dom_parent.childNodes){
                if(dom_parent.childNodes[n].tagName==tagname){
                    dom.push(dom_parent.childNodes[n]);
                }else{
                    continue;
                }
            }
        }
       return dom;
    }


    function doFn(elem,fn){  //给元素绑定函数
        if(elem instanceof Object){
            for(var i=0;i