p5.js | 通道()函数

简介

通道（channel）是 p5.js 中用于图像处理的一种工具，可以将图像的每个像素拆分成红、绿、蓝三个颜色通道。通道函数可在这些通道上进行单独或联合的操作，以调整图像的色彩、亮度、对比度等特性。

语法

image.channel([r, g, b, alpha]);

• r: 是否开启红色通道，布尔值，默认为 true。
• g: 是否开启绿色通道，布尔值，默认为 true。
• b: 是否开启蓝色通道，布尔值，默认为 true。
• alpha: 是否开启 alpha 通道，布尔值，默认为 true。

示例

以下示例通过禁止红色通道，使图像变为青色。

function preload() {
  img = loadImage('assets/cat.jpg');
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  img.loadPixels();
  for (var i = 0; i < img.pixels.length; i += 4) {
    img.pixels[i+1] = 255 - img.pixels[i+1];
    img.pixels[i+2] = 255 - img.pixels[i+2];    
  }
  img.updatePixels();
  // 禁止红色通道
  img.channel([false, true, true, true]);
  image(img, 0, 0, width, height);
}

注意事项

• 通道函数只能用于图像，不适用于形状和文本。
• 在通道函数之前，需要调用 loadPixels() 将像素加载到内存中，finishPixels() 则需要在通道函数之后调用，将修改后的像素刷新到图像中。
• 通道函数仅在本次绘图有效，不会对图像文件本身进行修改。