Date
Jul. 21st, 2024
 
2024年 6月 16日

Post: HTML5/CSS3: 模拟微信红包照片

HTML5/CSS3: 模拟微信红包照片

Published 12:01 Jan 28, 2016.

Created by @ezra. Categorized in #Programming, and tagged as #HTML.

Source format: Markdown

Table of Content

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

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

首先,根据标题你已经知道我们要使用 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

Pinned Message
HOTODOGO
I'm looking for a SOFTWARE PROJECT DIRECTOR / SOFTWARE R&D DIRECTOR position in a fresh and dynamic company. I would like to gain the right experience and extend my skills while working in great teams and big projects.
Feel free to contact me.
For more information, please view online résumé or download PDF
本人正在寻求任职 软件项目经理 / 软件技术经理 岗位的机会, 希望加⼊某个新鲜⽽充满活⼒的公司。
如有意向请随时 与我联系
更多信息请 查阅在线简历下载 PDF