getImageData(x, y, width, height) 从画布获取图像数据

功能分类： Canvas Applab JavaScript 少儿编程

获取在当前激活画布上的指定开始位置 (x, y) 指定 width 宽度及指定 height 高度的像素级别图像数据。

在 APP 应用里使用 canvas 画布，并在画布里绘制图片或图形，这样做有一个好处就是，通过这种方式，你可以在像素级别上获取图像数据并进行相应处理，而这已经足够你创建包含一些常见的图片处理功能的应用。

返回数据对象包含以下字段内容：

  • data - 一个包含像素颜色值的数组，每个像素包含四个值（red 红色，green 绿色，blue 蓝色 以及 alpha 透明度）。
  • width - 图像宽度（单位：像素）。
  • height - 图像高度（单位：像素）。

示例代码


// 获取并输出画布上 (5x5) 矩形区域图像数据
createCanvas('canvas1');
setStrokeColor('red');
rect(0,0,5,5);
var canvasData=getImageData(0, 0, 5, 5);
console.log(canvasData);

示例代码：图像复制 复制画布上的图像到另一个画布。


// 复制画布上的图像到另一个画布。
createCanvas('canvas1', 200, 200);
setFillColor("red");
circle(100, 100, 50);
var canvasData=getImageData(0, 0, 200, 200);
createCanvas('canvas2', 200, 200);
setPosition('canvas2', 0, 200);
setActiveCanvas('canvas2');
putImageData(canvasData, 0, 0);

示例代码：图像处理 复制画布上的图像，修改后输出到另一个画布。


// 复制画布上的图像，修改后输出到另一个画布。
createCanvas('canvas1', 200, 200);
setFillColor("red");
circle(100, 100, 50);
var canvasData=getImageData(0, 0, 200, 200);
canvasData.width=400;
createCanvas('canvas2', 200, 200);
setPosition('canvas2', 0, 200);
setActiveCanvas('canvas2');
putImageData(canvasData, 0, 0);

示例代码：获取图像红色值 获取并输出指定像素上的红色颜色值。


// 获取并输出指定像素上的红色颜色值。
createCanvas('canvas1', 200, 200);
setFillColor("red");
circle(100, 100, 50);
var canvasData=getImageData(0, 0, 200, 200);
var redValue = getRed(canvasData, 100, 100);
console.log(redValue);

示例代码：图像处理 修改像素红色值为 0 并输出。


// 修改像素红色值为 0 并输出
createCanvas('canvas1', 200, 200);
setFillColor("red");
circle(100, 100, 50);
var canvasData=getImageData(0, 0, 200, 200);
var redValue = getRed(canvasData, 100, 100);
console.log(redValue);
setRed(canvasData, 100, 100, 0);
putImageData(canvasData, 0, 0);
console.log(getRed(canvasData, 50, 50));

示例代码：图像处理 去除画布上像素所有红色值。


// 去除画布上像素所有红色值。
createCanvas('canvas1', 200, 200);
setFillColor("red");
circle(100, 100, 50);
var canvasData=getImageData(0, 0, 200, 200);
removeRed(canvasData);

// 去掉 'thisImageData' 里所有红色值，一行行循环进行处理
function removeRed(thisImageData){
    for(var y=0; y < thisImageData.height; y++) {
        for(var x=0; x < thisImageData.width; x++) {
            setRed(thisImageData, x, y, 0);
        }
        putImageData(thisImageData, 0, 0);
    }
}

语法规则


getImageData(startX, startY, endX, endY);

参数说明

名称 类型 必需 参数描述
x number Yes 指定获取图像数据开始位置横轴坐标。
y number Yes 指定获取图像数据开始位置纵轴坐标。
width number Yes 指定获取图像数据图像区域宽度。
height number Yes 指定获取图像数据图像区域高度。

返回值

图像数据对象。返回一个包含当前激活画布指定区域图像信息的图形数据对象。

提示说明

  • 使用这个方法之前，需要确保屏幕上 canvas 画布已被创建，你可以在 Applab 里的 设计 模式里创建画布，或在代码里使用 createCanvas() 方法创建画布。
  • 使用这些方法获取像素颜色相关的信息：getRed()、getGreen()、getBlue() 以及 getAlpha() 。
  • 使用这些方法进行像素颜色相关的设置：setRed()、setGreen()、setBlue() 以及 setAlpha()。
  • 使用 putImageData() 方法将处理后的图像数据放回到画布里并在画布里重新显示。

查看更多少儿编程教程、JavaScript 介绍

返回文档首页