经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » JavaScript » 查看文章
js给图片打马赛克的方法示例
来源：jb51　　时间：2021/5/17 13:52:58　　对本文有异议

本文主要主要介绍了js给图片打马赛克的方法示例，分享给大家，具体如下：

效果演示

在这里插入图片描述

Canvas简介

这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript）

不过， 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务

getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性

本手册提供完整的 getContext(“2d”) 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等

标记和 SVG 以及 VML 之间的差异：

标记和 SVG 以及 VML 之间的一个重要的不同是， 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。

这两种方式在功能上是等同的，任何一种都可以用另一种来模拟。从表面上看，它们很不相同，可是，每一种都有强项和弱点。例如，SVG 绘图很容易编辑，只要从其描述中移除元素就行。

要从同一图形的一个 标记中移除元素，往往需要擦掉绘图重新绘制它。

在这里插入图片描述

知识点简介

利用js创建图片

  1. let img = new Image()
  2. //可以给图片一个链接
  3. img.src = 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=826495019,1749283937&fm=26&gp=0.jpg'
  4. //或者本地已有图片的路径
  5. //img.src = './download.jpg'
  6.  
  7. //添加到HTML中
  8. document.body.appendChild(img)

canvas.getContext(“2d”)

语法：
参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API

  1. let ctx = Canvas.getContext(contextID)

ctx.drawImage()

JavaScript 语法 1：
在画布上定位图像：

  1. context.drawImage(img,x,y);

JavaScript 语法 2：
在画布上定位图像，并规定图像的宽度和高度：

  1. context.drawImage(img,x,y,width,height);

JavaScript 语法 3：
剪切图像，并在画布上定位被剪切的部分：

JavaScript 语法
getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。
对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：
R - 红色 (0-255)
G - 绿色 (0-255)
B - 蓝色 (0-255)
A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)
color/alpha 以数组形式存在，并存储于 ImageData 对象的 data 属性中

  1. var imgData=context.getImageData(x,y,width,height);

ctx.putImageData()

putImageData() 方法将图像数据（从指定的 ImageData 对象）放回画布上。

接下来跟着我一步一步做完这个小功能叭~

在这里插入图片描述

step-by-step

准备好我们的图片，并添加上我们的方法

  1. <body>
  2.     <img src="./download.jpg">
  3.     <button onclick="addCanvas()">生成Canvas</button>
  4.     <button onclick="generateImg()">生成图片</button>
  5. </body>

在这里插入图片描述

接下来写addCanvas方法

  1. function addCanvas() {
  2. 		let bt = document.querySelector('button')
  3.  
  4.         let img = new Image();	//1.准备赋值复制一份图片
  5.         img.src = './download.jpg'; 
  6.         img.onload = function() { //2.待图片加载完成
  7.             let width = this.width
  8.             let height = this.height
  9. 			
  10. 			let canvas = document.createElement('canvas') //3.创建画布
  11. 			let ctx = canvas.getContext("2d");  //4.获得该画布的内容
  12.         	canvas.setAttribute('width', width)  //5.为了统一，设置画布的宽高为图片的宽高
  13.         	canvas.setAttribute('height', height)
  14.    
  15.             ctx.drawImage(this, 0, 0, width, height);  //5.在画布上绘制该图片
  16.  
  17.             document.body.insertBefore(canvas, bt) //5.把canvas插入到按钮前面
  18.  
  19.         }
  20.     }
  21.  

成功在画布上得到图片：

在这里插入图片描述

嗯，我们已经成功走出了成功的一小步，接下来是干什么呢？…嗯，我们需要利用原生的onmouseup和onmousedown事件，代表我们按下鼠标这个过程，那么这两个事件添加到哪呢？

没错，既然我们要在canvas上进行马赛克操作，那我们必然要给canvas元素添加这两个事件

考虑到我们创建canvas的过程复杂了一点，我们做一个模块封装吧！

  1. function addCanvas() {
  2.         let bt = document.querySelector('button')
  3.  
  4.         let img = new Image();
  5.         img.src = './download.jpg'; //这里放自己的图片
  6.         img.onload = function() {
  7.             let width = this.width
  8.             let height = this.height
  9.  
  10.             let {
  11.                 canvas,
  12.                 ctx
  13.             } = createCanvasAndCtx(width, height)  //对象解构接收canvas和ctx
  14.  
  15.             ctx.drawImage(this, 0, 0, width, height);
  16.  
  17.             document.body.insertBefore(canvas, bt)
  18.  
  19.         }
  20.     }
  21.  
  22.     function createCanvasAndCtx(width, height) {
  23.         let canvas = document.createElement('canvas')
  24.         canvas.setAttribute('width', width)
  25.         canvas.setAttribute('height', height)
  26.         canvas.setAttribute('onmouseout', 'end()') //修补鼠标不在canvas上离开的补丁
  27.         canvas.setAttribute('onmousedown', 'start()')  //添加鼠标按下
  28.         canvas.setAttribute('onmouseup', 'end()')	//添加鼠标弹起
  29.         let ctx = canvas.getContext("2d");
  30.         return {
  31.             canvas,
  32.             ctx
  33.         }
  34.     }
  35.  
  36. 	function start() {
  37.             let canvas = document.querySelector('canvas')
  38.             canvas.onmousemove = () => {
  39.                 console.log('你按下了并移动了鼠标')
  40.             }
  41.         }
  42.  
  43.         function end() {
  44.             let canvas = document.querySelector('canvas')
  45.             canvas.onmousemove = null
  46.         }

测试一下我们的start()和end()是否生效了

在这里插入图片描述

嗯，目前来看，我们的代码依然如我们所愿的正常工作

接下来的挑战更加严峻，我们需要去获取像素和处理像素，让我们再重写start()函数

  1. function start() {
  2.     let img = document.querySelector('img')
  3.     let canvas = document.querySelector('canvas')
  4.     let ctx = canvas.getContext("2d");
  5.     imgData = ctx.getImageData(0, 0, img.clientWidth, img.clientHeight);
  6.     canvas.onmousemove = (e) => {
  7.         let w = imgData.width; //1.获取图片宽高
  8.         let h = imgData.height;
  9.  
  10.         //马赛克的程度，数字越大越模糊
  11.         let num = 10;
  12.  
  13.         //获取鼠标当前所在的像素RGBA
  14.         let color = getXY(imgData, e.offsetX, e.offsetY);
  15.  
  16.         for (let k = 0; k < num; k++) {
  17.             for (let l = 0; l < num; l++) {
  18.                 //设置imgData上坐标为(e.offsetX + l, e.offsetY + k)的的颜色
  19.                 setXY(imgData, e.offsetX + l, e.offsetY + k, color);
  20.             }
  21.         }
  22.         //更新canvas数据
  23.         ctx.putImageData(imgData, 0, 0);
  24.     }
  25. }
  26.  
  27. //这里为你提供了setXY和getXY两个函数，如果你有兴趣，可以去研究获取的原理
  28. function setXY(obj, x, y, color) {
  29.     var w = obj.width;
  30.     var h = obj.height;
  31.     var d = obj.data;
  32.     obj.data[4 * (y * w + x)] = color[0];
  33.     obj.data[4 * (y * w + x) + 1] = color[1];
  34.     obj.data[4 * (y * w + x) + 2] = color[2];
  35.     obj.data[4 * (y * w + x) + 3] = color[3];
  36. }
  37.  
  38. function getXY(obj, x, y) {
  39.     var w = obj.width;
  40.     var h = obj.height;
  41.     var d = obj.data;
  42.     var color = [];
  43.     color[0] = obj.data[4 * (y * w + x)];
  44.     color[1] = obj.data[4 * (y * w + x) + 1];
  45.     color[2] = obj.data[4 * (y * w + x) + 2];
  46.     color[3] = obj.data[4 * (y * w + x) + 3];
  47.     return color;
  48. }

嗯，我们离成功不远拉，最后一步就是生成图片

好在canavs给我们提供了直接的方法，可以直接将画布导出为Base64编码的图片：

  1. function generateImg() {
  2.     let canvas = document.querySelector('canvas')
  3.     var newImg = new Image();
  4.     newImg.src = canvas.toDataURL("image/png");
  5.     document.body.insertBefore(newImg, canvas)
  6. }

最终效果：

在这里插入图片描述

是不是无比轻松呢~，来看看你手写的代码是否和下面一样叭：

完整代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  10.  
  11. <body>
  12.  
  13.     <body>
  14.         <img src="./download.jpg">
  15.         <button onclick="addCanvas()">生成Canvas</button>
  16.         <button onclick="generateImg()">生成图片</button>
  17.     </body>
  18.     <script>
  19.         function addCanvas() {
  20.             let bt = document.querySelector('button')
  21.  
  22.             let img = new Image();
  23.             img.src = './download.jpg'; //这里放自己的图片
  24.             img.onload = function() {
  25.                 let width = this.width
  26.                 let height = this.height
  27.  
  28.                 let {
  29.                     canvas,
  30.                     ctx
  31.                 } = createCanvasAndCtx(width, height)
  32.  
  33.                 ctx.drawImage(this, 0, 0, width, height);
  34.  
  35.                 document.body.insertBefore(canvas, bt)
  36.  
  37.             }
  38.         }
  39.  
  40.         function createCanvasAndCtx(width, height) {
  41.             let canvas = document.createElement('canvas')
  42.             canvas.setAttribute('width', width)
  43.             canvas.setAttribute('height', height)
  44.             canvas.setAttribute('onmouseout', 'end()')
  45.             canvas.setAttribute('onmousedown', 'start()')
  46.             canvas.setAttribute('onmouseup', 'end()')
  47.             let ctx = canvas.getContext("2d");
  48.             return {
  49.                 canvas,
  50.                 ctx
  51.             }
  52.         }
  53.  
  54.         function start() {
  55.             let img = document.querySelector('img')
  56.             let canvas = document.querySelector('canvas')
  57.             let ctx = canvas.getContext("2d");
  58.             imgData = ctx.getImageData(0, 0, img.clientWidth, img.clientHeight);
  59.             canvas.onmousemove = (e) => {
  60.                 let w = imgData.width; //1.获取图片宽高
  61.                 let h = imgData.height;
  62.  
  63.                 //马赛克的程度，数字越大越模糊
  64.                 let num = 10;
  65.  
  66.                 //获取鼠标当前所在的像素RGBA
  67.                 let color = getXY(imgData, e.offsetX, e.offsetY);
  68.  
  69.                 for (let k = 0; k < num; k++) {
  70.                     for (let l = 0; l < num; l++) {
  71.                         //设置imgData上坐标为(e.offsetX + l, e.offsetY + k)的的颜色
  72.                         setXY(imgData, e.offsetX + l, e.offsetY + k, color);
  73.                     }
  74.                 }
  75.                 //更新canvas数据
  76.                 ctx.putImageData(imgData, 0, 0);
  77.             }
  78.         }
  79.  
  80.         function generateImg() {
  81.             let canvas = document.querySelector('canvas')
  82.             var newImg = new Image();
  83.             newImg.src = canvas.toDataURL("image/png");
  84.             document.body.insertBefore(newImg, canvas)
  85.         }
  86.  
  87.         function setXY(obj, x, y, color) {
  88.             var w = obj.width;
  89.             var h = obj.height;
  90.             var d = obj.data;
  91.             obj.data[4 * (y * w + x)] = color[0];
  92.             obj.data[4 * (y * w + x) + 1] = color[1];
  93.             obj.data[4 * (y * w + x) + 2] = color[2];
  94.             obj.data[4 * (y * w + x) + 3] = color[3];
  95.         }
  96.  
  97.         function getXY(obj, x, y) {
  98.             var w = obj.width;
  99.             var h = obj.height;
  100.             var d = obj.data;
  101.             var color = [];
  102.             color[0] = obj.data[4 * (y * w + x)];
  103.             color[1] = obj.data[4 * (y * w + x) + 1];
  104.             color[2] = obj.data[4 * (y * w + x) + 2];
  105.             color[3] = obj.data[4 * (y * w + x) + 3];
  106.             return color;
  107.         }
  108.  
  109.         function end() {
  110.             let canvas = document.querySelector('canvas')
  111.             canvas.onmousemove = null
  112.         }
  113.     </script>
  114. </body>
  115.  
  116. </html>

当然，你可以做更多创作，比如上面打的马赛克是正方形的，你可以利用你的数学知识让其变为圆形，以圆心为鼠标中心扩散

你也可以选择完善一些过程，例如马赛克位置打错了，可以选择将画布清空然后重新开始~
或者做一些善后处理，导出图片后隐藏canvas画布

到此这篇关于js给图片打马赛克的方法示例的文章就介绍到这了,更多相关js 图片马赛克内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

JavaScript热门文章

  • echarts 饼图 + 全屏显示
  • js正则匹配以{开头,以}结尾的表达式怎么写？-附源码
  • echarts 实现数据(tooltip)自动轮播插件
  • Js设置博客园主题色(theme-color)
  • elementUI 设置input的只读或禁用的方法
  • 超级好用的流程图js框架 值得收藏
  • layui table+复杂表头+合并单元格
  • 获取地理位置
  • 如何使用JavaScript导入和导出Excel文件
  • WebStorm eslint插件报错解决 - TypeError: this.CliEngine is not a constructor

    • JavaScript推荐文章

  • 一些八股：1.fetch 的理解。2.let、const、var
  • 电子表格转身购物车：三步轻松实现
  • Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)
  • IntersectionObserver + scrollIntoView 实现电梯导航 - xingba-coder
  • 可视化—gojs 超多超实用经验分享(三)
  • PixiJS源码分析系列： 第一章 从最简单的例子入手
  • WebRTC入门
  • 前端 Array.sort() 源码学习
  • 【技巧】JS代码这么写，前端小姐姐都会爱上你
  • 【JS】await异常捕获，这样做才完美

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号