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

Question

我无法从图像中获取 RGB 数据，我正在做的是获取区域的 de x、y、宽度和高度，所以，我想知道区域的 RGB 数据，没有像素， .

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

这就是我正在做的

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 上将图像导入 canvas，因为那将是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 );