模仿微信红包模糊照片

看到微信红包照片，以及慕课网制作红包照片的启发特意用原生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;
}())

模仿微信红包模糊照片相关推荐

Canvas模仿微信红包照片
1.最终效果: 2.实现过程: 1.将图片加载出来,并加上模糊效果: index.html: <!DOCTYPE html> <html> <head lang=&quo ...
Android控件之证件照控件包含模仿微信朋友圈照片浏览
本次带来的是一个证件照控件功能:可以自定义证件照存储路径.压缩大小.水印文字.水印颜色.水印大小 certificateview 使用说明: 将其添加到存储库末尾的根的build.gradle中: ...
Canvas实现微信红包照片效果
本篇文章来源慕课网课程<canvas玩转红包照片>,用canvas及css3结合,实现红包照片的效果,并不做支付过程,代替的是使用2个按钮,显示清晰图片和重置圆圈可见区域.未做移动的屏幕适 ...
如何获取微信红包照片的原始清晰图片
2016-02-07,腾讯再次开通了朋友圈的微信红包功能,我的朋友圈着实被目不暇接的高糊照片刷了一把屏.在这里记录一下查看清晰图片的方法. 首先,需要抓取红包照片的地址.怎么抓取?请看传送门:http ...
Java小游戏：模仿微信群发红包
Java小游戏:模仿微信群发红包微信群主发普通红包,普通红包规则: 群主的一笔金额,从群主余额中扣除,平均分成n等分,让群员领取. 成员领取红包后,保存到余额中. 请根据规则,完成案例中所有类的定义 ...
微信红包照片来了，用变色龙隐形二维码赚点零花钱
在微信支付已经日趋成熟化的今天,红包已经不仅仅是逢年过节时才有,有了微信,随时随地都可以收发红包."今天你收到红包了吗?"已经成为很多人的日常问候.但单纯的抢红包.直接收发红包又或 ...
产品也要看气质 ——从支付宝新春送福和微信红包照片说起
2016年春节还未到,但从1月底已经能感受浓浓的年味了,这当然少不了互联网的推波助澜,首当其冲的莫过于各家花样百出的红包大战.说到红包,就不得不提2家巨头的代表产品,支付宝和微信(不知曾几何时,我们越 ...
支付宝微信红包战背后的算盘
五福卡斗毛玻璃照:支付宝微信红包战背后的算盘(转) 来源:2016年02月03日每日经济新闻 ◎每经记者蒋佩芳植根中国的互联网公司越来越接地气,中国文化独有的春节红包正被支付宝和微信整合成社交和 ...
微信“红包封面”终于开放：这样免费定制！
微信红包个人可以免费定制了,下面给大家说说教程,在上周该功能上线一段时间后又紧急关闭了,现在重新开放了. 这次是通过网页的方式定制而不是小程序了,给大家说说方法,需要将微信更新到最新版本,创建视频号, ...

模仿微信红包模糊照片

模仿微信红包模糊照片相关推荐

最新文章

热门文章