HTML canvas(画布)getImageData()方法

getImageData()方法定义和用法

getImageData()方法返回一个ImageData对象，该对象复制画布上指定矩形的像素数据。
注意： ImageData对象不是图片，它指定画布上的一个部分（矩形），并保存该矩形内每个像素的信息。
对于ImageData对象中的每个像素，有四条信息，即RGBA值：

R - 红色（从0到255）
G - 绿色（从0到255）
B - 蓝色（从0到255）
A - Alpha通道（从0到255; 0是透明的，255是完全可见）

颜色/alpha信息保存在数组中，并存储在ImageData对象的data属性中。
提示：在操作数组中的颜色/alpha信息后，可以使用putImageData()方法将图像数据复制回画布。
例子：
获取返回的ImageData对象中第一个像素的颜色/alpha信息的代码：


                var imgData = ctx.getImageData(30, 30, 50, 50);
                red = imgData.data[0];
                green = imgData.data[1];
                blue = imgData.data[2];
                alpha = imgData.data[3];
                alert(red + " " + green + " " + blue + " " + alpha);

提示：您还可以使用getImageData()方法反转画布上图像的每个像素的颜色。

getImageData()方法浏览器支持

Internet Explorer	Chrome	FireFox	Safari	Opera

9.0（含）以上	支持	支持	支持	支持

getImageData()方法语法

context.getImageData(x,y,width,height);

getImageData()方法实例

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

function copy() {
    var imgData = ctx.getImageData(10, 10, 50, 50);
    ctx.putImageData(imgData, 10, 70);
}

尝试一下

使用getImageData()反转画布上图像的每个像素的颜色：

document.getElementById("scream").onload = function() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("scream");
    ctx.drawImage(img, 0, 0);
    var imgData = ctx.getImageData(0, 0, c.width, c.height);
    // invert colors
    var i;
    for (i = 0; i < imgData.data.length; i += 4) {
        imgData.data[i] = 255 - imgData.data[i];
        imgData.data[i+1] = 255 - imgData.data[i+1];
        imgData.data[i+2] = 255 - imgData.data[i+2];
        imgData.data[i+3] = 255;
    }
    ctx.putImageData(imgData, 0, 0);
};

尝试一下

getImageData()方法参数值

参数	描述
x	要从左上角开始复制的x坐标(以像素为单位)
y	要从左上角开始复制的y坐标(以像素为单位)
width	复制矩形区域的宽度
height	复制矩形区域的高度

getImageData()方法相关页面

HTML教程：HTML脚本

HTML教程：HTML画布