Вопросы Теги

Получать данные RGB площади изображения с языком сценариев JavaScript, [закрывший]

Я делаю страницу, и одна из Вашей функциональности будет состоять в том, чтобы мочь анализировать изображение, так что то, в чем я нуждаюсь, состоит в том, чтобы мочь знать RGB площади изображения, изображение содержалось в одном <canvas src="imagen.jpg"></canvas> в настоящее время я работал и я смог получать площадь, которую было нужно анализировать, он вручает мне следующие параметры: - Координата X - координата И-Width-Height Я Знаю, что есть что-то, что называются ImageData, но читал (документация w3school и mozilla) и еще мне не удается понять, как он используется, кто-то мог бы помогать мне реализовывать это? Спасибо

0
задан 01.11.2019, 00:55
1 ответ

У canvas нет признака src, ты должен помещать изображение внутри одного canvas и потом использовать getImageData происходя, как parГЎmetro левая сторона, он достигает, широко и высоко. Потом ты должен делать .data, первые три элемента - r, g b. Пример:

язык сценариев JavaScript 

const canvas = document.getElementById('canvas');
const img = document.getElementById('imagen');
const color = document.getElementById('color');
const ctxImagen = canvas.getContext('2d');

ctxImagen.drawImage(img, 0, 0, img.width, img.height);
//.getImageData(izquierda, arriba, ancho, alto);
var rgb = ctxImagen.getImageData(5, 5, 1, 1).data; //<-- un pixel en las coordenadas  5 y 5

console.log("red ", rgb[0]);
console.log("green ", rgb[1]);
console.log("blue ", rgb[2]);

color.style.backgroundColor = `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`;

HTML 

<img id="imagen" class="pixelar" src="https://i.stack.imgur.com/rLuNu.jpg?s=48&g=1">
<canvas id="canvas"></canvas>
<div id="color" style="width: 100px; height: 100px;"></div>

не может помещать себе живой пример из-за темы CORS, но что-то asГ - должно функционировать.

1
ответ дан 01.12.2019, 14:43
  • 1
    Привет, это я funcionó но посмотри то, за чем оно последует, я использую librerí в который он возвращает мне стоимость x, y, width, height á преступница, которая я выбрал, má s однако, эта стоимость я перемещаю их его в эту часть var rgb = ctxImagen.getImageData (variable_con_ejex,variable_con_ejey, variable_con_ancho, variable_con_largo) .data; и descargué изображение, у которого только есть красный и синий цвет и возвращает мне эту стоимость: сеть - 255 и green и blue в 0, и á преступница, которая выбрала está схватывая красный и синий цвет –  Jesús 02.11.2019, 03:56
  • 2
    Ширина и длина моего canvas - та же самая, чем моего изображения –  Jesús 02.11.2019, 04:02