Convierta una imagen a una matriz RGB en Javascript

¿Es posible obtener una matriz de píxeles desde una imagen PNG o BMP en Javascript? Me gustaría obtener una matriz RGB a partir de una imagen para poder manipular la matriz de píxeles y luego dibujar la imagen modificada en un lienzo.Convierta una imagen a una matriz RGB en Javascript

ACTUALIZACIÓN: He encontrado un duplicado exacto aquí: how to get the RGB value of an image in a page using javascript?

Sin embargo, las respuestas no lo hacen entrar en muchos detalles sobre cómo resolver este problema en realidad.

Fuente

2012-05-06 Anderson Green

Si hace clic en el enlace de la respuesta a esa pregunta, lo llevará a una respuesta detallada de cómo invertir el color de cada píxel en una imagen. Debe ser trivial convertir ese código en almacenar una matriz de píxeles. – JaredMcAteer

Consulte https://developer.mozilla.org/en/Canvas_tutorial –

posible duplicado de [cómo obtener el valor RGB de una imagen en una página usando javascript?] (Http://stackoverflow.com/questions/2754865/how -to-get-the-rgb-value-of-an-image-in-a-page-using-javascript) –

Hay cientos de tutoriales en la red sobre el uso de HTML Canvas imageData, que obtiene los valores RGBA de un lienzo. Haga una búsqueda de canvas imageData y encontrará mucha información.

Todo lo que tiene que hacer es:

ctx.drawImage(img, 0, 0); 
var imgData = ctx.getImageData(x, y, width, height).data;

imgData es ahora una matriz en donde cada 4 lugares son cada píxel. Entonces, [0][1][2][3] son [r][g][b][a] del primer píxel.

Fuente

2012-05-07 01:06:55

¿Cuál debería ser el tipo de parámetro de "img"? ¿Debería ser un objeto de imagen, o debería ser la URL de la imagen como una cadena? –

@AndersonGreen una instancia de objeto Imagen, puede obtenerlo a través de DOM, crear uno nuevo mediante: 'var img = new Image(); img.src = "http: // ..." o img.src = "data: image/jpeg; base64, ...." ' – Mustafa

No tengo

Convierta una imagen a una matriz RGB en Javascript

Respuesta

Cuestiones relacionadas