js实现微信朋友圈模糊图片功能

本人第一次写文章 ，写的不好大家就凑合着看吧。

界面的简单效果。

主要html如下

　　<div id="content">

<!--模糊图片-->

<img id="blur" src="data:image/p_001.jpg">

<!--使用canvas绘制图片-->

<canvas id="canvas"></canvas>

<a href="javascript:reset()" rel="external nofollow" class="button" id="button-reset">查看</a>

<a href="javascript:kan()" rel="external nofollow" class="button" id="button-show">立即看全图</a>

　　</div>

主要的js代码如下

1. var canWidth = window.innerWidth;
2. var canHeight = window.innerHeight;
3. var canvas = document.getElementById("canvas");
4. var ctx = canvas.getContext("2d");
5. canvas.width = canWidth;
6. canvas.height = canHeight;
7. var img = new Image();
8. img.src = "image/p_001.jpg";
9. var radius = 50;
10. var leftMargin = 0,
11. topMargin = 0;
12. img.onload = function() {
13. //初始化父容器的宽高使窗口与canvas宽高相同
14. $("#content").css({
15. "width": canvas.width + "px",
16. "height": canvas.height + "px"
17. });
18. //模糊图片与canva中绘制的图片(隐藏的清楚图片)宽高相同，别忘加px，否则计算出来的只是个值，不带px
19. $("#blur").css("width", img.width + "px");
20. $("#blur").css("height", img.height + "px");
21. //左边距：(图片宽高 - canvas宽高) / 2;等于一边的边距宽高
22. leftMargin = (img.width - canvas.width) / 2;
23. topMargin = (img.height - canvas.height) / 2;
24. //模糊图片的上边距与左边距
25. $("#blur").css("top", String(-topMargin) + "px");
26. $("#blur").css("left", String(-leftMargin) + "px");
27. initCanvas();
28. }
29. function initCanvas() {
30. var theleft = leftMargin < 0 ? -leftMargin : 0;
31. var thetop = topMargin < 0 ? -topMargin : 0;
32. //创建圆
33. region = {
34. x: Math.random() * (canvas.width - 2 * radius - 2 * theleft) + radius + theleft,
35. y: Math.random() * (canvas.height - 2 * radius - 2 * thetop) + radius + thetop,
36. r: radius
37. };
38. draw(img, region);
39. }
40. function draw(img) {
41. ctx.clearRect(0, 0, canvas.width, canvas.height);
42. ctx.save();
43. setRegion(region);
44. /*绘制清楚图片，如leftMargin<0那么取0，
45. 图片宽度与canvas宽度哪个最小取哪个值*/
46. ctx.drawImage(img, Math.max(leftMargin, 0), Math.max(topMargin, 0),
47. Math.min(canvas.width, img.width), Math.min(canvas.height, img.height),
48. leftMargin < 0 ? -leftMargin : 0, topMargin < 0 ? -topMargin : 0,
49. Math.min(canvas.width, img.width), Math.min(canvas.height, img.height));
50. ctx.restore();
51. }
52. function setRegion(region) {
53. ctx.beginPath();
54. ctx.arc(region.x, region.y, region.r, 0, Math.PI * 2, false);
55. //进行裁减圆
56. ctx.clip();
57. }
58. function reset() {
59. initCanvas();
60. }
61. function show() {
62. var animation = setInterval(function() {
63. region.r += 20;
64. if (region.r > Math.max(canvas.width, canvas.height)) {
65. clearInterval(animation);
66. }
67. draw(img, region);
68. }, 30);
69. }
70. function kan() {
71. var name = prompt('口令：5201314', '');
72. if (name == '5201314') {
73. show();
74. } else {
75. alert('输入口令有误，请重新输入！');
76. }
77. }

var canWidth = window.innerWidth;var canHeight = window.innerHeight;var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");canvas.width = canWidth;canvas.height = canHeight;var img = new Image();img.src = "image/p_001.jpg";var radius = 50;var leftMargin = 0,topMargin = 0;img.onload = function() {//初始化父容器的宽高使窗口与canvas宽高相同$("#content").css({"width": canvas.width + "px","height": canvas.height + "px"});//模糊图片与canva中绘制的图片(隐藏的清楚图片)宽高相同，别忘加px，否则计算出来的只是个值，不带px$("#blur").css("width", img.width + "px");$("#blur").css("height", img.height + "px");//左边距：(图片宽高 - canvas宽高) / 2;等于一边的边距宽高leftMargin = (img.width - canvas.width) / 2;topMargin = (img.height - canvas.height) / 2;//模糊图片的上边距与左边距$("#blur").css("top", String(-topMargin) + "px");$("#blur").css("left", String(-leftMargin) + "px");initCanvas();}
function initCanvas() {var theleft = leftMargin < 0 ? -leftMargin : 0;var thetop = topMargin < 0 ? -topMargin : 0;//创建圆region = {x: Math.random() * (canvas.width - 2 * radius - 2 * theleft) + radius + theleft,y: Math.random() * (canvas.height - 2 * radius - 2 * thetop) + radius + thetop,r: radius};draw(img, region);}
function draw(img) {ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.save();setRegion(region);/*绘制清楚图片，如leftMargin<0那么取0，图片宽度与canvas宽度哪个最小取哪个值*/ctx.drawImage(img, Math.max(leftMargin, 0), Math.max(topMargin, 0),Math.min(canvas.width, img.width), Math.min(canvas.height, img.height),leftMargin < 0 ? -leftMargin : 0, topMargin < 0 ? -topMargin : 0,Math.min(canvas.width, img.width), Math.min(canvas.height, img.height));ctx.restore();}
function setRegion(region) {ctx.beginPath();ctx.arc(region.x, region.y, region.r, 0, Math.PI * 2, false);//进行裁减圆ctx.clip();}
function reset() {initCanvas();}
function show() {var animation = setInterval(function() {region.r += 20;if (region.r > Math.max(canvas.width, canvas.height)) {clearInterval(animation);}draw(img, region);}, 30);}function kan() {var name = prompt('口令：5201314', '');if (name == '5201314') {show();} else {alert('输入口令有误，请重新输入！');}}