canvas實作的紅包照片自适應效果

效果圖

<a href="http://s1.51cto.com/wyfs02/M00/8D/12/wKioL1iFfOugpq0_AADy6IRoWZk645.png-wh_500x0-wm_3-wmp_4-s_720916973.png" target="_blank"></a>

<a href="http://s5.51cto.com/wyfs02/M00/8D/15/wKiom1iFfOyheo7uAAH7jw_xe-o800.png-wh_500x0-wm_3-wmp_4-s_2227091677.png" target="_blank"></a>

<a href="http://s5.51cto.com/wyfs02/M01/8D/15/wKiom1iFfO3Rst-bAAES2FhLqHc303.png-wh_500x0-wm_3-wmp_4-s_3913502313.png" target="_blank"></a>

<a href="http://s5.51cto.com/wyfs02/M01/8D/12/wKioL1iFfO3S9ZX2AAJ8Jgkv8y8598.png-wh_500x0-wm_3-wmp_4-s_1587515383.png" target="_blank"></a>

html結構(index.html)

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

&lt;meta charset="utf-8"&gt;

&lt;title&gt;紅包照片&lt;/title&gt;

&lt;link rel="stylesheet" href="blur.css"&gt;

&lt;script src="jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;

&lt;meta name="viewport" 

  content=" height = device-height,

width = device-width,

initial-scale = 1.0,

minimum-scale = 1.0,

maximum-scale = 1.0,

user-scalable = no

" /&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;div id="blur-div"&gt;

&lt;img id="blur-image" src="20170122161717.png" alt=""&gt;

&lt;canvas id="blur-canvas"&gt;&lt;/canvas&gt;

&lt;a href="javascript:reset()" class="button" id="reset-button"&gt;reset&lt;/a&gt;

&lt;a href="javascript:show()" class="button" id="show-button"&gt;show&lt;/a&gt;

&lt;/div&gt;

&lt;script src="blur.js" type="text/javascript" charset="utf-8" &gt;&lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;

css樣式(blur.css)

*{

margin: 0;

padding: 0;

}

#blur-div{

margin: 0 auto;

position: relative;

overflow: hidden;

#blur-image{

display: block;

filter:blur(20px);

-webkit-filter:blur(20px);

-moz-filter:blur(20px);

-ms-filter:blur(20px);

-o-filter:blur(20px);

position: absolute;

left: 0px;

top: 0px;

z-index: 0;

#blur-canvas{

z-index: 100;

.button{

z-index: 200;

width: 100px;

height: 30px;

color: white;

text-decoration: none;

text-align: center;

line-height: 30px;

border-radius: 5px;

#reset-button{

left: 50px;

bottom: 20px;

background-color: #058;

#reset-button:hover{

background-color: #047;

#show-button{

right: 100px;

background-color: #085;

#show-button:hover{

background-color: #074;

js腳本(blur.js)

var canvasWidth = window.innerWidth;

var canvasHeight = window.innerHeight;

var canvasObj = document.getElementById("blur-canvas");

var contextObj = canvasObj.getContext("2d");

canvasObj.width = canvasWidth;

canvasObj.height = canvasHeight;

var imageObj = new Image();

var radius = 50;

var clippingRegion = {x:-1,y:-1,r:radius}

var leftMargin = 0,topMargin = 0;

imageObj.src = "20170122161717.png";

imageObj.onload = function(e){

$("#blur-div").css("width",canvasWidth+"px");

$("#blur-div").css("height",canvasHeight+"px");

$("#blur-image").css("width",imageObj.width+"px");

$("#blur-image").css("height",imageObj.height+"px");

leftMargin = (imageObj.width - canvasObj.width) / 2;

topMargin = (imageObj.height - canvasObj.height) / 2;

$("#blur-image").css("top",String(-topMargin)+"px");

$("#blur-image").css("left",String(-leftMargin)+"px");

initCanvas();

function initCanvas(){

var theleft = leftMargin &lt; 0 ? -leftMargin:0;

var thetop = topMargin &lt; 0 ? -topMargin:0;

var rx = Math.random()*(canvasObj.width - 2*radius-2*theleft)+radius+theleft;

var ry = Math.random()*(canvasObj.height - 2*radius-2*thetop)+radius+thetop;

clippingRegion = {x:rx,y:ry,r:radius};

drawImage(imageObj,clippingRegion);

function drawImage(imageObj,clippingRegion){

contextObj.clearRect(0,0,canvasObj.width,canvasObj.height);

contextObj.save();

setClippingRegion(clippingRegion);

// contextObj.drawImage(imageObj,0,0);

contextObj.drawImage(imageObj,Math.max(leftMargin,0),Math.max(topMargin,0),Math.min(canvasObj.width,imageObj.width),Math.min(canvasObj.height,imageObj.height),leftMargin &lt; 0 ? -leftMargin:0,topMargin &lt; 0 ? -topMargin:0,Math.min(canvasObj.width,imageObj.width),Math.min(canvasObj.height,imageObj.height));

contextObj.restore();

function setClippingRegion(clippingRegion){

contextObj.beginPath();

contextObj.arc(clippingRegion.x,clippingRegion.y,clippingRegion.r,0,Math.PI*2,false);

contextObj.clip();

function reset(){

function show(){

document.getElementById("reset-button").style.display="none";

var animation = setInterval(function(){

clippingRegion.r += 20;

if (clippingRegion.r &gt; 2*Math.max(canvasObj.width,canvasObj.height)) {

clearInterval(animation);

document.getElementById("reset-button").style.display="block";

},30);

canvasObj.addEventListener("touchstart",function(e){

e.preventDefault();

});

本文轉自  素顔豬  51CTO部落格，原文連結:http://blog.51cto.com/suyanzhu/1893846