如何使用JavaScript从图像区域获取RGB数据

Question

我无法从图像中获取RGB数据，我正在做的是获取区域的x，y，宽度和高度，因此，我想从像素的区域中获取RGB数据，区域。

[我试图将画布与getImageData一起使用，但它只返回一个像素，Im使用库来获取x，y，w和h的参数，我的图像大小与画布相同

这是我在做什么

const canvas2 = document.getElementById('canvasIMG'); //Get the canvas
const img2 = document.getElementById('imagen');//Get the image
const ctxImagen = canvas2.getContext('2d');//Get the context of canvas
ctxImagen.drawImage(img, 0, 0);
var rgb = ctxImagen.getImageData(ejex,ejey,1000, 1000).data; //"ejex" is the x coordinate and "ejey" is y coordinate, and 1000 is the width and the height, i tried to change the values of w and h, and is the same always, I download a RGB image, and in the console just print the color of both uppset corners
console.log("red ", rgb[0]);
console.log("green ", rgb[1]);
console.log("blue ", rgb[2]);
console.log("alpha ", rgb[3]);

我没有收到任何错误消息。

Answer 1

要获取某个区域的像素的平均值，您应该获取该面积，然后自己计算平均值（我在这里做了一个渐变，因为我实际上无法在Stack Overflow上将图像导入画布中，是CORS问题）：

const canvas = document.createElement( 'canvas' );
const ctx = canvas.getContext( '2d' );
const gradient = ctx.createLinearGradient( 0, 0, 500, 500 );

gradient.addColorStop( 0, 'red' );
gradient.addColorStop( 1, 'blue' );

document.body.appendChild( canvas );

canvas.width = canvas.height = 500;
ctx.fillStyle = gradient;
ctx.fillRect( 0, 0, 500, 500 );

const data = ctx.getImageData( 0, 0, 500, 500).data;
const average = { r: 0, g: 0, b: 0, a: 0 }; // Creates an object to count all the values up
const pixels = data.length / 4; // The actual amount of pixels read

// Now lets loop through all the pixels. They are a flat array of values for [r,g,b,a] sequently from top left to bottom right. So every four entries forms one pixel.

for( let i = 0; i < data.length; i += 4 ){
   
   // Add all the averages to their corresponding counters.
   average.r += data[i];
   average.g += data[i+1];
   average.b += data[i+2];
   average.a += data[i+3];
  
}

// Now just divide the count with the amount of pixels to get it as one value. ROund it, as RGB is Integers only, and divide the A by 255 as the alpha value is a Float between 0 and 1.

average.r = Math.floor( average.r / pixels );
average.g = Math.floor( average.g / pixels );
average.b = Math.floor( average.b / pixels );
average.a = Math.floor( average.a / pixels ) / 255;

// Lets draw a small square with the final average pixel color:

ctx.fillStyle = `rgba(${average.r},${average.g},${average.b},${average.a})`;
ctx.fillRect( 20, 20, 50, 50 );
ctx.strokeStyle = 'white';
ctx.lineWidth = 5;
ctx.strokeRect( 20, 20, 50, 50 );

Answer 2

您似乎想要的是一个区域的平均颜色，它由多个其他彩色像素组成。从getImageData().data中得到的是该区域的整个位图数组，依次指定每个像素的RGBA值。为了获得多个像素的平均颜色，您需要遍历数据数组，将数组中的每个红色，绿色，蓝色和Alpha相加。然后，将每个像素除以该区域中的像素数。这可以通过以下方法完成：

var rgb = ctxImagen.getImageData(ejex,ejey,1000, 1000).data; 

const rgbLen = rgb.length, pixelsCount = rgbLen / 4
let red = 0, green = 0, blue = 0, alpha = 0, i = 0

while(i < rgbLen) {
  red += rgb[i]
  green += rgb[i+1]
  blue += rgb[i+2]
  alpha += rgb[i+3]
  i += 4
}

red /= pixelsCount
green /= pixelsCount
blue /= pixelsCount
alpha /= pixelsCount

const areaRgba = [red, green, blue, alpha]