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

Posted 2020-10-11

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

 

界面的简单效果。

主要html如下

　　<div id="content">

<!--模糊图片-->

<img id="blur" src="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. }
30. function initCanvas() {
31. var theleft = leftMargin < 0 ? -leftMargin : 0;
32. var thetop = topMargin < 0 ? -topMargin : 0;
33. //创建圆
34. region = {
35. x: Math.random() * (canvas.width - 2 * radius - 2 * theleft) + radius + theleft,
36. y: Math.random() * (canvas.height - 2 * radius - 2 * thetop) + radius + thetop,
37. r: radius
38. };
39. draw(img, region);
40. }
42. function draw(img) {
43. ctx.clearRect(0, 0, canvas.width, canvas.height);
44. ctx.save();
45. setRegion(region);
46. /*绘制清楚图片，如leftMargin<0那么取0，
47. 图片宽度与canvas宽度哪个最小取哪个值*/
48. ctx.drawImage(img, Math.max(leftMargin, 0), Math.max(topMargin, 0),
49. Math.min(canvas.width, img.width), Math.min(canvas.height, img.height),
50. leftMargin < 0 ? -leftMargin : 0, topMargin < 0 ? -topMargin : 0,
51. Math.min(canvas.width, img.width), Math.min(canvas.height, img.height));
52. ctx.restore();
53. }
55. function setRegion(region) {
56. ctx.beginPath();
57. ctx.arc(region.x, region.y, region.r, 0, Math.PI * 2, false);
58. //进行裁减圆
59. ctx.clip();
60. }
62. function reset() {
63. initCanvas();
64. }
66. function show() {
67. var animation = setInterval(function() {
68. region.r += 20;
69. if (region.r > Math.max(canvas.width, canvas.height)) {
70. clearInterval(animation);
71. }
72. draw(img, region);
73. }, 30);
74. }
75. function kan() {
76. var name = prompt(‘口令：5201314‘, ‘‘);
77. if (name == ‘5201314‘) {
78. show();
79. } else {
80. alert(‘输入口令有误，请重新输入！‘);
81. }
82. }