手把手教你利用js给图片打马赛克

最新推荐文章于 2022-07-23 21:40:18 发布

置顶

VGtime

最新推荐文章于 2022-07-23 21:40:18 发布

阅读量3k

点赞数 16

本文链接：https://blog.csdn.net/jkr10000/article/details/116803023

版权

这篇博客介绍了如何使用JavaScript的Canvas API给图片打马赛克。首先，文章讲解了Canvas的基本概念和常用方法，如getImageData()和putImageData()。接着，通过逐步指导，展示了如何监听鼠标事件并在画布上处理像素以实现马赛克效果。最后，给出了完整的代码示例，并鼓励读者进行进一步的创新，如改变马赛克形状或优化处理流程。

摘要由CSDN通过智能技术生成

文章目录

效果演示

在这里插入图片描述

Canvas简介

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

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

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

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

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

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

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

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

要从同一图形的一个标记中移除元素，往往需要擦掉绘图重新绘制它。
在这里插入图片描述

知识点简介

利用js创建图片

let img = new Image()
//可以给图片一个链接
img.src = 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=826495019,1749283937&fm=26&gp=0.jpg'
//或者本地已有图片的路径
//img.src = './download.jpg'

//添加到HTML中
document.body.appendChild(img)

canvas.getContext(“2d”)

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

let ctx = Canvas.getContext(contextID)

ctx.drawImage()

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

context.drawImage(img,x,y);

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

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

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

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

ctx.getImageData()

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

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

ctx.putImageData()

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

接下来跟着我一步一步做完这个小功能叭~
在这里插入图片描述

step-by-step

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

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

在这里插入图片描述
接下来写addCanvas方法

function addCanvas() {
   
		let bt = document.querySelector('button')

        let img = new Image();	//1.准备赋值复制一份图片
        img.src = './download.jpg'; 
        img.onload = function() {
    //2.待图片加载完成
            let width = this.width
            let height = this.height
			
			let canvas = document.createElement('canvas') //3.创建画布
			let ctx = canvas.getContext("2d");  //4.获得该画布的内容
        	canvas.setAttribute('width', width)  //5.为了统一，设置画布的宽高为图片的宽高
        	canvas.setAttribute('height', height)
   
            ctx.drawImage(this, 0, 0, width, height);  //5.在画布上绘制该图片

            document.body.insertBefore(canvas, bt) //5.把canvas插入到按钮前面

        }
    }

成功在画布上得到图片：
在这里插入图片描述

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

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

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

function addCanvas() {
   
        let bt

最低0.47元/天解锁文章

VGtime

关注

16
点赞
踩
50

收藏

觉得还不错? 一键收藏
36
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫