Canvas——操作像素

文章目录

canvas可以对图片的像素进行操作。

获取画布的像素信息
画笔.getImageData(x1,y1,x2,y2) : (x1,y1)起点； (x2,y2)终点。
获取到的像素信息是一个一维数组，四个值是一个像素点的信息分别代表 rgba的四个值，取值都是0-255
渲染画布像素信息
将修改好的数据重新渲染到画布上： 画笔.putImageData(ImageData , x1, y1);
ImageData ：像素信息
（x1,y1）: ImageData 对象左上角的 x和y 坐标，以像素计。

putImageData最多可以有7个参数：
ctx.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
imgData 规定要放回画布的 ImageData 对象。
x ImageData 对象左上角的 x 坐标，以像素计。
y ImageData 对象左上角的 y 坐标，以像素计。
dirtyX 可选。水平值（x），以像素计，在画布上显示图像的位置。
dirtyY 可选。竖直值（y），以像素计，在画布上显示图像的位置。
dirtyWidth 可选。在画布上绘制图像所使用的宽度。
dirtyHeight 可选。在画布上绘制图像所使用的高度。

eg：图片变灰

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><!--  --><canvasid="canvas1"width="600"height="400"style="background: lightgray"></canvas><script>// 找到画布var canvas1 = document.getElementById("canvas1");var ctx = canvas1.getContext("2d");let img = new Image();img.src = "./QQ截图20230117100435.png";img.onload = function () {ctx.drawImage(img, 0, 0, 600, 400);// 获取画布的像素信息：画笔.getImageData(x1,y1,x2,y2)// 像素信息是一个一维数组，四个值是一个像素点的信息分别代表 rgba的四个值let imageData = ctx.getImageData(0, 0, 600, 400);for (let i = 0; i < imageData.data.length; i += 4) {// 变灰let avg =(imageData.data[i] +imageData.data[i + 1] +imageData.data[i + 2]) /3;imageData.data[i] = avg;imageData.data[i + 1] = avg;imageData.data[i + 2] = avg;imageData.data[i + 3] = 255;}//将修改好的数据重新渲染到画布上ctx.putImageData(imageData, 0, 0);};</script></body>
</html>

原图：

变化后的图：

使用ctx.putImageData(imageData, 0, 0, 300, 200, 300, 200);的效果：

Canvas——操作像素相关推荐

用 canvas 操作图片像素
canvas 像素操作在 canvas 中可以使用 context.drawImage(image,dx,dy) 方法将图片绘制在 canvas 上.将图片绘制上去后,还可以使用 context.g ...
利用canvas处理图片像素
利用canvas处理图片像素 1.学习getImageData功能 getImageData方法会返回一个ImageData对象,其中包含Canvas画布部分或完整的像素点信息.我们要对其做像素处理, ...
Opencv中三种操作像素的方法
测试环境:opencv3.1.0 + Visual Studio 2015 + win7 64位 opencv中有3中方法可以访问/修改图像的像素值,分别为: 1. 指针访问 2. ...
html5canvas下绘制gif,JS+canvas操作gif动图
这次给大家带来JS+canvas操作gif动图,JS+canvas操作gif动图的注意事项有哪些,下面就是实战案例,一起来看一下. HTML5 canvas可以读取图片信息,绘制当前图片.于是可以实现 ...
canvas操作图片设置背景
** canvas操作图片: ** 在画布上插入图片: 在canvas中获取图片的路径: var img = new Image(); img.src = "路径" ctx.dra ...
html怎样把图片放进画布中,HTML5 canvas操作图片
1.canvas操作图像的能力 canvas更有意思的一项特性就是图像操作能力.可以用于动态的图像合成或者作为图形的背景,以及游戏界面(Sprites)等等.浏览器支持的任意格式的外部图片都可以使用, ...
HTML5 Canvas操作图像像素
操作图像像素如果要对图像进行进一步的处理,就可以先通过getImageData()方法获取图像像素,进行处理后再通过putImageData()方法,把处理后的像素重新绘制到画布中. 1)getIm ...
Canvas操作图片像素
Canvas支持直接处理图片中的像素,通过对图片像素进行各种类型的处理,能够实现不同的图片效果,本文的示例图片来自参考文献1,图片像素处理方法参照的参考文献2-7. Canvas主要通过两种方 ...
使用canvas操作图像
canvas 获取截图具体是使用 canvas 的 toDataURL 方法: var image = new Image(); image.src = canvas.toDataURL(&qu ...

Canvas——操作像素

文章目录

Canvas——操作像素相关推荐

最新文章

热门文章