前几天微信红包照片着实火了一把,很多人也已经发现可以通过抓包获取到原始图片,而其背后的实现方式也引起了一些朋友的兴趣。

所以今天我们一起实现一个简单的微信红包照片效果。

首先,根据标题你已经知道我们要使用 HTML5 和 CSS3 来实现。那么新建一个 HTML5 文件吧。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="description" content="Blur">
		<meta name="keywords" content="Blur">
		<title>Blur</title>
		<script src="jquery-2.2.0.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>

	</body>
</html>

接下来,准备一张图片(img.jpg),例如:

image

并在 body 部分加入一张图片。

<body>
	<div id="blur-div">
		<img id="blur-image" src="img.jpg" alt="blur image">
	</div>
</body>

然后,准备一个 blur.css 文件:


#blur-div {
	width: 350px;
	height: 389px;
	margin: 0 auto;
	position: relative;
}

#blur-image {
	width: 350px;
	height: 389px;
	margin: 0 auto;
	display: block;

	filter: blur(20px);
	-webkit-filter: blur(20px);
	-o-filter: blur(20px);
	-moz-filter: blur(20px);
	-ms-filter: blur(20px);

	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 0;
}

在 HTML 中链接 CSS:


	<link href="blur.css" rel="stylesheet" type="text/css"/>
</head>

看一下效果,已经可以显示一个模糊效果的图片了。紧接着要实现的,是那个不模糊的圆。我的思路是,在模糊的图片前面覆盖一张原始图片,通过剪切原始图片使其只保留一个圆形部分。

在前面的 blur-div 中补充一个 Canvas 画布:


<div id="blur-div">
	<img id="blur-image" src="img.jpg" alt="blur image">
	<canvas id="canvas"></canvas>
</div>

为画布设置 CSS,为圆形部分添加一个阴影:


#canvas {
	margin: 0 auto;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 100;
	display: block;
	filter: drop-shadow(0px 0px 5px #E2E1E0);
	-webkit-filter: drop-shadow(0px 0px 5px #E2E1E0);
	-o-filter: drop-shadow(0px 0px 5px #E2E1E0);
	-moz-filter: drop-shadow(0px 0px 5px #E2E1E0);
	-ms-filter: drop-shadow(0px 0px 5px #E2E1E0);
}

现在,设置画布内容,开始剪切。我们新建一个 blur.js 文件:


var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")

canvas.width = 350
canvas.height = 389

function initCanvas() {
	draw(img, {x: 160, y: 280, r: 50})
}

function draw(image, clip) {
	context.clearRect(0, 0, canvas.width, canvas.height)
	context.save()
	context.beginPath()
	context.arc(clip.x, clip.y, clip.r, 0, Math.PI * 2)
	context.clip()
	context.drawImage(image, 0, 0)
	context.restore()
}

var img = new Image()
img.src = "img.jpg"
img.onload = function () {
	initCanvas()
}

别忘了在 HTML 中加入这个 JS 文件:


<script src="blur.js" charset="utf-8"></script>

现在,一个微信红包的模糊效果就实现了,关于适配和优化的部分就不多说了。

image2