Document

# 前言在我开发我的个人开源项目[region-screenshot-js](https://github.com/weijun-lab/region-screenshot-js)时，需要加一个图片马赛克绘制功能，在这里分享我的实现方式，希望对大家所有启发。**本文要求你最好有一定的canvas知识储备**，没有也没关系，我会详细介绍相关api。 **👉 [在线demo](https://zihelab.com/blog/examples/Canvas/%E5%89%8D%E7%AB%AF%E5%AE%9E%E7%8E%B0%E5%9B%BE%E7%89%87%E9%A9%AC%E8%B5%9B%E5%85%8B.html)👈** # 什么是马赛克马赛克，指现行广为使用的一种图像处理手段，此手段将影像特定区域的色阶细节劣化并造成色块打乱的效果，因为这种模糊看上去有一个个的小格子组成，便形象的称这种画面为马赛克。其目的通常是使之无法辨认。 ——摘自百度百科 ![u=3222903388,1753975984\&fm=253\&fmt=auto\&app=138\&f=JPEG.webp](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/ee6f90c8037c4bf29689eb14631032bd~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5a2Q56a-5Li2:q75.awebp?rk3s=f64ab15b&x-expires=1768259220&x-signature=84J6pPngTm%2FqCGZyZegER9NLjL4%3D) ![764AC5C9-B756-4381-8566-EA09930A7F5D.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/05c192def1a8476fae24992ec7168a75~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5a2Q56a-5Li2:q75.awebp?rk3s=f64ab15b&x-expires=1768259220&x-signature=rAXg6qDgx8VWiWw9zSUxl9gyUx0%3D) 通过上面的原图与马赛克图相比，可以很直观的看到马赛克图由一个个`色块`构成。单个色块内`仅有一种颜色`。算法的核心原理非常简单，**通过循环的方式获取到当前色块位置所对应的所有原始像素点，将这些像素点的平均色值用于色块。** # 相关api 明白了马赛克制作原理，我们需要学习两个相关的api来帮助我们实现功能。 ## 1.[getImageData](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/getImageData) 该方法接收一个矩形区域，返回 ImageData 对象，该对象拷贝了指定矩形区域内的像素数据。 ```js let imageData = ctx.context.getImageData(x,y,width,height) ``` | 参数 | 描述 | | -------- | ----------------- | | *x* | 开始复制的左上角位置的 x 坐标。 | | *y* | 开始复制的左上角位置的 y 坐标。 | | *width* | 将要复制的矩形区域的宽度。 | | *height* | 将要复制的矩形区域的高度。 | 下图是`getImageData`的返回值，其中`data`属性为每个像素点的颜色值，数组中每四项可看为一组，分别代表像素点的R、G、B、A值。 ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/cfd46609d80b403ba5729f46f214d8a9~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5a2Q56a-5Li2:q75.awebp?rk3s=f64ab15b&x-expires=1768259220&x-signature=3ahpmBN9c2PdX84UHWnHZZct%2BRI%3D) ## 2.[putImageData](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/putImageData) 该方法将已有的ImageData 对象放回画布上。 ```js ctx.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight); ``` | 参数 | 描述 | | ------------- | --------------------------- | | *imgData* | 规定要放回画布的 ImageData 对象。 | | *x* | ImageData 对象左上角的 x 坐标，以像素计。 | | *y* | ImageData 对象左上角的 y 坐标，以像素计。 | | *dirtyX* | 可选。水平值（x），以像素计，在画布上放置图像的位置。 | | *dirtyY* | 可选。水平值（y），以像素计，在画布上放置图像的位置。 | | *dirtyWidth* | 可选。在画布上绘制图像所使用的宽度。 | | *dirtyHeight* | 可选。在画布上绘制图像所使用的高度。 | ## 3.举个栗子🌰 使用上面两个api来实现图片颜色反转。 ```js let canvas = document.querySelector('canvas'); let ctx = canvas.getContext('2d'); let img = new Image(); img.src = "./loopy.png"; img.onload = function () { ctx.drawImage(img, 0, 0); let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); for(let i=0;i { ctx.beginPath() canvas.onmousemove = (e) => { ctx.globalCompositeOperation = "source-over"; let { left, top } = canvas.getBoundingClientRect(); let mouseRelativeX = e.clientX - left; let mouseRelativeY = e.clientY - top; ctx.lineTo(mouseRelativeX,mouseRelativeY); ctx.lineWidth = 10; ctx.stroke(); } } canvas.onmouseup = () => { canvas.onmousemove = null; } ``` ![b2f3o-17xsx.gif](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/7fa3d31cf664457abe34e989d6c7108a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5a2Q56a-5Li2:q75.awebp?rk3s=f64ab15b&x-expires=1768259220&x-signature=UlJJ2qlCcZ68NhmFSIaFH0%2FjSVc%3D) 2.设置`globalCompositeOperation`为`destination-out` destination-out：**只会显示新绘制图像之外的原有图像，新绘制的图像是透明的。** ```js let canvas = document.querySelector('canvas'); let ctx = canvas.getContext('2d'); let img = new Image(); img.src = "./1.webp"; img.onload = function () { ctx.drawImage(img, 0, 0); } canvas.onmousedown = (e) => { ctx.beginPath() canvas.onmousemove = (e) => { ctx.globalCompositeOperation = "destination-out"; let { left, top } = canvas.getBoundingClientRect(); let mouseRelativeX = e.clientX - left; let mouseRelativeY = e.clientY - top; ctx.lineTo(mouseRelativeX,mouseRelativeY); ctx.lineWidth = 10; ctx.stroke(); } } canvas.onmouseup = () => { canvas.onmousemove = null; } ``` ![50ik5-v7q7m.gif](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/5682fb2220f14b8cb526906ccd6b704b~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5a2Q56a-5Li2:q75.awebp?rk3s=f64ab15b&x-expires=1768259220&x-signature=kLd5GnjVwwCe0zFE2hz8neHSRhI%3D) 3.设置`globalCompositeOperation`为`destination-in` destination-in：**只会显示新绘制图像之内的原有图像，新绘制的图像是透明的。** ```js let canvas = document.querySelector('canvas'); let ctx = canvas.getContext('2d'); let img = new Image(); img.src = "./1.webp"; let isInit = true; canvas.onmousedown = (e) => { //这里不再使用beginPath()方法 //如果仍然使用beginPath()方法，代表将开始一个新路径，所以先前的线条会被canvas当做原图像 //而destination-in只会显示新绘制图像之内的原有图像，所以不去掉beginPath()方法，上一个线条就会在新的一次绘制开始时被清除掉 canvas.onmousemove = (e) => { //每次绘制动作执行前先将globalCompositeOperation属性置为默认值，再背景图重新绘制到画布上 //这样做为了让一张没被任何处理的背景图永远被canvas当成原图像，好与后面绘制的线条（新绘制的图像）产生正确的显示关系 //因为destination-in只会显示新绘制图像之内的原有图像。 ctx.globalCompositeOperation = "source-over"; ctx.drawImage(img, 0, 0); ctx.globalCompositeOperation = "destination-in"; let { left, top } = canvas.getBoundingClientRect(); let mouseRelativeX = e.clientX - left; let mouseRelativeY = e.clientY - top; //根据isInit变量来决定是否重置画笔起点位置，在不开始一个新路径的同时，确保线条可以被单独绘制出来而不总是收尾相连 if (isInit) { ctx.moveTo(mouseRelativeX, mouseRelativeY); isInit = false; } ctx.lineTo(mouseRelativeX, mouseRelativeY); ctx.lineWidth = 10; ctx.stroke(); } } canvas.onmouseup = () => { isInit = true; canvas.onmousemove = null; } ``` ![iia0m-7sil8.gif](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6b9c0639ca014374a375bbb27e927dcd~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5a2Q56a-5Li2:q75.awebp?rk3s=f64ab15b&x-expires=1768259220&x-signature=j35o1Rp7p3IAUlTNbOfScKCymik%3D) ## 2.功能实现 **核心思路**
1.再创建一个与现有画布大小相同的画布，填充上马赛克图像，不将其添加到dom中。
2.在鼠标涂抹页面上的canvas的过程中同时按照上文中`destination-in`画笔演示的方式对新创建的马赛克画布进行绘制。
3.此时马赛克画布在鼠标经过的地方显示了马赛克，而其他部分是透明的，接着将它的内容叠加显示到页面的画布中去，我们就实现了鼠标涂抹绘制马赛克的功能。 **完整代码：** ```html Document

``` # 总结以上是我在开发个人开源项目[region-screenshot-js](https://github.com/weijun-lab/region-screenshot-js)的部分技术总结，我们从0到1实现了一个绘制马赛克的功能，有任何问题或改进建议，欢迎评论区交流，互相学习。往期文章推荐： ——[使用three-to-cesium.js轻松融合Three和Cesium场景](https://juejin.cn/post/7482003475900399668)