putImageData(imgData, x, y) 画布上显示图像

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

输出指定的 imageData 数据到当前激活画布的指定 (x, y) 位置。

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

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

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

示例代码


// 复制画布上指定区域的图形到画布上新的位置
createCanvas('canvas1', 200, 200);
setFillColor("blue");
rect(0, 0, 50, 50);
var canvasData=getImageData(0, 0, 50, 50);
putImageData(canvasData, 100, 0);
putImageData(canvasData, 50, 50);
putImageData(canvasData, 0, 100);
putImageData(canvasData, 100, 100);

示例代码：修改图像红色值 修改指定像素上的红色颜色值。


//修改指定像素上的红色颜色值。
createCanvas('canvas1', 320, 480);
setFillColor('red');
rect(0, 0, 100, 200);
var imageData = getImageData(0, 0, 320, 480);

// 输出在 imageData 里 像素 x:50 y:50 的红色值到控制台
// 会看到红色值为 255
console.log(getRed(imageData, 50, 50));

// 修改像素红色值，并更新到画布
// 设置 imageData 里像素 x:50 y:50 红色值为 0
setRed(imageData, 50, 50, 0);

// 将修改后的结果输出到画布
putImageData(imageData, 0, 0);

// 重新输出像素红色值到控制台
// 会看到红色值变更为 0
console.log(getRed(imageData, 50, 50));

示例代码：图像处理 修改指定像素红色值为 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);
    }
}

语法规则


putImageData(imgData, x, y);

参数说明

名称 类型 必需 参数描述
imgData object Yes 从画布获取的图像数据对象（使用 getImageData() 方法获取）。
x number Yes 指定在画布上放置图像数据相关图像的开始位置横轴坐标（左上角位置坐标）。
y number Yes 指定在画布上放置图像数据相关图像的开始位置纵轴坐标（左上角位置坐标）。

返回值

只在显示结果页面体现代码执行前后变化。

提示说明

  • 使用这个方法之前，需要确保屏幕上 canvas 画布已被创建，你可以在 Applab 里的 设计 模式里创建画布，或在代码里使用 createCanvas() 方法创建画布。使用 putImageData() 之前调用 getImageData() 获取图像数据。获取图像的尺寸与调用 getImageData() 时指定的区域参数有关。putImageData() 方法将在画布上指定的 (x, y) 位置放置图像数据相关的图像。
  • 使用这些方法获取像素颜色相关的信息：getRed()、getGreen()、getBlue() 以及 getAlpha() 。
  • 使用这些方法进行像素颜色相关的设置：setRed()、setGreen()、setBlue() 以及 setAlpha()。
  • 使用 getImageData() 来获取当前激活画布上的图像数据。

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

返回文档首页