前端基础_像素的处理

像素的处理

在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);
    };

取得了这些像素以后，就可以对这些像素进行处理了，例