您的位置：首页 > 移动开发 > 微信开发

模仿微信红包模糊照片

2016-02-26 20:33 543 查看

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

效果图

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>模仿微信红包图片</title>
</head>
<style>
body{margin:0;}
.img-box{margin:50px auto 0;position:relative;}
.img-box>img{width:100%;position:relative;z-index:1;
filter: blur(20px);
-webkit-filter: blur(20px);
-ms-filter: blur(20px);
-0-filter: blur(20px);
}
.img-box>canvas{position:absolute;top:0;left:0;z-index:100;}
.img-box>div{width:5em;height:2em;line-height:2em;text-align:center;margin:0 auto;background-color:#00CC99;color:#fff;}
.img-box>div:hover{background-color:#009999;cursor:pointer;}
</style>
<body>
<div class="img-box">
<img src="pb2.jpg" alt="">
<canvas></canvas>
<div>显示全部</div>
</div>
<div class="img-box">
<img src="pb2.jpg" alt="">
<canvas></canvas>
<div>显示全部</div>
</div>
</body>
<script src="pictureblur.js"></script>
<script>
picBlur.init(".img-box");
</script>

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
.tagName==tagname){
                    dom.push(dom_parent[i].childNodes
);
                }else{
                    continue;
                }
            }
        }
        }else{
            for(var n in dom_parent.childNodes){
                if(dom_parent.childNodes
.tagName==tagname){
                    dom.push(dom_parent.childNodes
);
                }else{
                    continue;
                }
            }
        }
       return dom;
    }

    function doFn(elem,fn){  //给元素绑定函数
        if(elem instanceof Object){
            for(var i=0;i<elem.length;i++){
                fn(elem[i]);
            }
        }else{
            fn(elem);
        }
    }

return picBlur = new picblur;

}())

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 微信红包照片 javascript canvas 模糊

相关文章推荐

新的分享

章节导航