Как получить данные RGB из области изображения с помощью JavaScript - PullRequest
Новая
       38

Как получить данные RGB из области изображения с помощью JavaScript

1 голос
/ 02 ноября 2019

Я не могу получить данные RGB из изображения, я делаю, чтобы получить de x, y, ширину и высоту области, поэтому я хочу знать данные RGB из области, а не из пикселей,ОБЛАСТИ.

Я пытался использовать холст с getImageData, но он возвращает только пиксель, я использую библиотеку, чтобы получить параметры 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]);

Я не получаю никаких сообщений об ошибках.

1 Ответ

1 голос
/ 02 ноября 2019

Чтобы получить среднее значение для пикселей области, вы должны получить площадь и затем самостоятельно рассчитать среднее значение (здесь я создал градиент, поскольку фактически не могу импортировать изображения на холст при переполнении стека, так какбудет проблема 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 );
...