失眠网 > canvas像素操作取色器写入像素数据缩放和反锯齿保存图片

canvas像素操作取色器写入像素数据缩放和反锯齿保存图片

时间：2024-03-11 12:15:39

博客简介

HTML5中的canvas允许我们直接对像素进行操作，我们可以通过ImageData对象操纵像素数据，读取或将数据数组写入该对象中。这里还会介绍如何控制图像使其平滑（反锯齿）以及如何从Canvas画布中保存图像。

imageData对象读取或写入imageDate对象缩放和反锯齿保存图片

ImageData对象

ImageData对象中存储着canvas对象真实的像素数据，包含以下只读属性

iwidth：图片的宽度，单位pxheight：图片的高度，单位pxdata：Uint8ClampedArray类型的一维数组，包含着RGBA格式的整型数据，范围在0至255之间（包括255）。data属性返回一个像素数组 Uint8ClampedArray，它可以被使用作为查看初始像素数据。每个像素用4个1bytes值(按照红，绿，蓝和透明值的顺序; 这就是"RGBA"格式) 来代表。每个颜色值部份用0至255来代表。每个部份被分配到一个在数组内连续的索引，左上角像素的红色部份在数组的索引0位置。像素从左到右被处理，然后往下，遍历整个数组。获取i行j列的R/G/B/A值：

imageData.data[((行数-1)*imageData.width + (列数-1))*4 - 1 + 1/2/3/4];

获取像素数组Uint8ClampedArray的大小：

var numBytes = imageData.data.length;

创建一个ImageData对象

一般的，创建一个ImageData对象，我们可以使用createImageData方法：

var myImageData = ctx.createImageData(width, height)：创建一个新的尺寸为width，height的ImageData对象，所有的像素被预设为黑色透明。var myImageData = ctx.createImageData(anotherImageData)：创建一个被anotherImageData对象指定的相同像素的ImageData对象。这个新的对象像素全部被预设为透明黑。这个并非复制了图片数据。

var myImageData = ctx.createImageData(width, height);var myImageData = ctx.createImageData(anotherImageData);

获取场景canvas区域的ImageData对象

我们可以通过getImageData方法获取canvas指定区域的像素数据：

getImageData（x,y,width,height）：返回一个ImageData对象，该对象描述了(x,y,x+width,y+height)区域的像素

举例：取色器

这个例子中，我们将返回鼠标位置的像素：

获取鼠标的位置x，y获取该位置的ImageData对象获取对象的数据将数据返回，并且用该RGBA值绘制颜色

在场景canvas中写入像素数据

我们通过getImageData方法获取canvas指定区域的像素数据，同时也可以用putImageData()方法将像素写入写入canvas中

putImageData（imageData,x,y）:将ImageData对象代表的图片绘制在x,y位置直接修改ImageData.data就能够改变ImageData对象

putImageData举例

以下我们将会操纵一张图片像素，取出像素值后，对它进行灰度和反相操作，我们设置两个函数grayscale 和invert 来实现：

grayscale 灰度处理：x = 0.299r + 0.587g + 0.114b

function grayscale()//灰度{for(var i=0;i<data.length;i+=4){avg=0.299*data[i] + 0.587*data[i+1] + 0.114*data[i+2];data[i]=data[i+1]=data[i+2]=avg;}ctx.clearRect(0,0,canvas.width,canvas.height);ctx.putImageData(imageData,0,0);}

invert 反相处理：x=255-i

function intervar()//反相{for(var i=0;i<data.length;i+=4){data[i]=255-data[i];//rdata[i+1]=255-data[i+1];//gdata[i+2]=255-data[i+2];//b}ctx.clearRect(0,0,canvas.width,canvas.height);ctx.putImageData(imageData,0,0);}

最后添加监听

var invertbtn = document.getElementById('invertbtn');invertbtn.addEventListener('click', intervar);var grayscalebtn = document.getElementById('grayscalebtn');grayscalebtn.addEventListener('click', grayscale);