前端基础_像素的处理
像素的处理
在HTML5中使用canvas API所能够做到的图像处理技术中，还有一个更让人惊讶的技术就是像素处理技术。使用canvas API能够获取图像中的每一个像素，然后得到该像素颜色的rgb值或rgba值。
使用图形上下文对象的getImageData方法来获取图像中的像素，该方法的定义如下。
var imagedata = context.getImageData(sx,sy,sw,sh);
该方法使用4个参数，sx、sy分别表示所获取区域的起点横坐标、起点纵坐标，sw、sh分别表示所获取区域的宽度和高度。
Imagedata变量是一个CanvasPixelArray对象，具有height、width、data等属性。data属性是一个保存像素数据的数组，内容类似于“[r1,g1,b1,a1, r2,g2,b2,a2, r3,g3,b3,a3,…]”，其中，r1,g1,b1,a1分别为第一个像素的红色值、绿色值、蓝色值、透明值；r2,g2,b2,a2分别为第二个像素的红色值、绿色值、蓝色值、透明值、依次类推。data.length为所取得像素的数量。
使用canvas API获取图像中所有像素的方法代码如下。
var context = canvas.getContext('2d');
var image = new Image();
image.onload = function()
{
var.imagedata;
context.drawImage(image,0,0);
imagedata = context.getImageData(0,0,image.width,image.height);
};
取得了这些像素以后，就可以对这些像素进行处理了，例如可以进行蒙版处理，面部识别等较复杂的图像处理操作。
【例17.26】下面给出一个用canvas API将图像进行反相操作的实例。
所谓的反相操作就是调整反转图像中的颜色。在对图像进行反相时，通道中每个像素的亮度值都会转换为256级颜色值标度上相反的值。例如，原图像中值为255的像素会被转换为0，值为5的像素会被转化为250。该实例中在得到像素数组后，将该数组中每个像素的颜色进行了反相操作后的图像重新绘制在画布上。该方法的定义如下。
context.putImageData(imagedata,dx,dy[,dirtyX,dirtyY,dirtyWidth, dirtyHeight]);
该方法使用7个参数，imagedata为前面所述的像素数组，dx、dy分别表示重绘图像的起点横坐标和起点纵坐标，后面dirtyX、dirtyY、dirtyWidth、dirtyHeight这4个参数为可选参数，给出一个矩形的起点横坐标、起点纵坐标、宽度与高度，如果加上这4个参数，则只绘制像素数组中这个矩形范围内的图像。
https://www.bilibili.com/video/BV1kR4y167Cp/?spm_id_from=333.999.0.0&vd_source=a7816e3b2a3a67ac39dc87f6bf92421c