Convertire un'immagine in un array RGB in Javascript

È possibile ottenere una serie di pixel da un'immagine PNG o BMP in Javascript? Mi piacerebbe ottenere una matrice RGB da un'immagine in modo da poter manipolare la matrice di pixel e quindi disegnare l'immagine modificata su una tela.Convertire un'immagine in un array RGB in Javascript

UPDATE: Ho trovato un duplicato esatto qui: how to get the RGB value of an image in a page using javascript?

Tuttavia, le risposte non andare troppo nei dettagli su come risolvere realmente il problema.

fonte

2012-05-06 Anderson Green

Se si fa clic sul collegamento della risposta a tale domanda, si ottiene una risposta dettagliata su come invertire il colore di ciascun pixel in un'immagine. Dovrebbe essere banale convertire quel codice in un array di pixel. – JaredMcAteer

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

possibile duplicato di [come ottenere il valore RGB di un'immagine in una pagina utilizzando javascript?] (Http://stackoverflow.com/questions/2754865/how -a-get-the-rgb-value-of-an-image-in-a-page-using-javascript) –

Ci sono un centinaio di tutorial in rete sull'utilizzo di HTML Canvas imageData, che ottiene i valori RGBA di un canvas. Fai una ricerca per canvas imageData e troverai molte informazioni.

Tutto quello che dovete fare è:

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

imgData è ora un array in cui ogni 4 posti sono ogni pixel. Quindi [0][1][2][3] sono [r][g][b][a] del primo pixel.

fonte

2012-05-07 01:06:55

Quale dovrebbe essere il tipo di parametro "img"? Dovrebbe essere un oggetto immagine, o dovrebbe essere l'URL dell'immagine come una stringa? –

@AndersonGreen un'istanza di Image object, puoi ottenerla tramite DOM, creane una nuova con: 'var img = new Image(); img.src = "http: // ..." o img.src = "data: image/jpeg; base64, ...." ' – Mustafa

Non ho

Convertire un'immagine in un array RGB in Javascript

risposta

Problemi correlati