码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2017-10-20 16:50:24      阅读:288      评论:0      收藏:0      [点我收藏+]

标签:com   es2017   htm   dom   init   min   margin   reg   bsp   

本人第一次写文章 ,写的不好大家就凑合着看吧。技术分享

 

界面的简单效果。

技术分享

主要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. }
  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. }

 

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

标签:com   es2017   htm   dom   init   min   margin   reg   bsp   

原文地址:http://www.cnblogs.com/jerryboys/p/7699983.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!