getBlue(imageData, x, y) 获取蓝色值

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

获取指定图像数据对象 imageData 在指定 (x, y) 位置像素的 blue 蓝色数值（范围：0-255）。

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

像素颜色是如何工作的: 在屏幕上我们看到的每个像素的颜色由四个值组成。这四个值分别为 Red 红色值、Green 绿色值、Blue 蓝色值以及 alpha 透明度值，这四个值共同决定了屏幕上显示的色彩及明暗度。这四个值中的前三个代表三个不同颜色的值，每个范围都是从最小的 0 到最大的 255 总共 256 个值。alpha 透明度值则比较特殊，通过它来确定像素与屏幕上同一点上的其他像素相比的不透明程度。通常 alpha 值最小为 0 - 表示像素完全透明，最大为 255 - 表示像素完全不透明。这四个值通常按 Red 红色、Green 绿色、Blue 蓝色的顺序排列，前三个简称 RGB；加上最后一个 Alpha 透明度，合起来简称为 RGBA。完全红色（只有红色）的像素颜色为 (255, 0, 0, 255)，完全绿色（只有绿色）的像素颜色为 (0, 255, 0, 255)，完全蓝色（只有蓝色）的像素颜色为 (0, 0, 255, 255)。完全黑色则是 (0, 0, 0, 255)，完全白色则是 (255, 255, 255, 255)。前三个值越低越接近黑色，越高越接近白色。

示例代码


// 获取并输出画布上指定像素的蓝色值。
createCanvas('canvas1');
setFillColor('blue');
rect(0, 0, 100, 200);
var imageData = getImageData(0, 0, 100, 200);
var blueValue = getBlue(imageData, 50, 50);
console.log(blueValue);


// 获取并输出画布上指定图像里像素的蓝色值。
createCanvas('canvas1');
drawImageURL("https://studio.xiaowai.co/blockly/media/skins/bee/static_avatar.png");
var imageData = getImageData(0, 0, 100, 100);
console.log(getBlue(imageData, 10, 10));
console.log(getBlue(imageData, 50, 50));

示例代码：图像处理 修改指定像素蓝色值为 0 。


// 修改指定像素蓝色值为 0 。
createCanvas('canvas1');
setFillColor('blue');
rect(0, 0, 100, 200);
var imageData = getImageData(0, 0, 100, 200);
console.log(getBlue(imageData, 50, 50));
setBlue(imageData, 50, 50, 0);
putImageData(imageData, 0, 0);
console.log(getBlue(imageData, 50, 50));

示例代码：不要这么蓝 清除画布上所有像素里的蓝色


// 清除画布上所有像素里的蓝色
createCanvas('canvas1');
drawImageURL("https://studio.xiaowai.co/blockly/media/skins/bee/static_avatar.png");
button("id", "Halve Blue");
setPosition('id', 200, 0);
onEvent("id", "click", function() {
  var imageData = getImageData(0, 0, 320, 480);
  halveBlue(imageData);
});

// 清除 'thisImageData' 里所有像素里的蓝色值。
// 一行行循环进行处理。
function halveBlue(thisImageData){
    for(var y=0; y < thisImageData.height; y++) {
        for(var x=0; x < thisImageData.width; x++) {
            var newBlue = (getBlue(thisImageData, x, y) / 2);
            setBlue(thisImageData, x, y, newBlue);
        }
        putImageData(thisImageData, 0, 0);
    }
}

语法规则


getBlue(imageData, x, y);

参数说明

名称 类型 必需 参数描述
imageData object Yes 从画布获取的图像数据对象（使用 getImageData() 方法获取）。
x number Yes 指定图像左上方的横轴坐标位置（单位：像素）。
y number Yes 指定图像左上方的纵轴坐标位置（单位：像素）。

返回值

数值。返回一个指定图像数据 (x, y) 位置上像素的 blue 蓝色数值（范围：0 - 255）。

提示说明

  • 在使用图像颜色相关的方法之前，需要确保屏幕上 canvas 画布以及里面的相关图像已被创建。你可以在 Applab 里的 设计 模式里创建画布，或在代码里使用 createCanvas() 方法创建画布。使用 getImageData() 方法来获取当前激活画布上的图像信息。
  • 使用这些相关方法设置颜色：setBlue() 以及 setRGB()。
  • 使用 putImageData() 方法将处理后的图像数据放回到画布里并在画布里重新显示。

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

返回文档首页