模仿微信红包模糊照片

最新推荐文章于 2020-12-19 06:59:52 发布

lyh_951128

最新推荐文章于 2020-12-19 06:59:52 发布

阅读量1.4k

点赞数

分类专栏： js 文章标签：微信红包照片 javascript canvas 模糊

本文链接：https://blog.csdn.net/lyh_951128/article/details/50752332

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

看到微信红包照片，以及慕课网制作红包照片的启发特意用原生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[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<elem.length;i++){
                fn(elem[i]);
            }
        }else{
            fn(elem);
        }
    }


return picBlur = new picblur;


}())