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