¿Manipulación de imágenes con Javascript?

Question

Estoy tratando de escribir un script de greasemonkey, y sería preferible que sea capaz de trabajar con imágenes (específicamente, encuentre el píxel más oscuro en una imagen). ¿Hay alguna manera de hacer esto o debo incrustar el flash?

Answer 1

Dado que es específico de Firefox, puede usar un elemento de lienzo. Nunca escribí un script de greasemonkey, así que no sé exactamente cómo lo harías, pero la idea es que crees un nuevo elemento canvas y dibujes la imagen en el lienzo. Luego, puede obtener los valores de píxel del lienzo.

// Create the canvas element 
var canvas = document.createElement("canvas"); 
canvas.width = image.width; 
canvas.height = image.height; 

// Draw the image onto the canvas 
var ctx = canvas.getContext("2d"); 
ctx.drawImage(image, 0, 0); 

// Get the pixel data 
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); 

// Loop through imageData.data - an array with 4 values per pixel: red, green, blue, and alpha 
for (int x = 0; x < imageData.width; x++) { 
    for (int y = 0; y < imageData.height; y++) { 
     var index = 4 * (y * imageData.width + x); 
     var r = imageData.data[index]; 
     var g = imageData.data[index + 1]; 
     var b = imageData.data[index + 2]; 
     var a = imageData.data[index + 3]; 

     // Do whatever you need to do with the rgba values 
    } 
} 

Answer 2

Scrap la parte

var r = imageData.data[index]; 
var g = imageData.data[index + 1]; 
var b = imageData.data[index + 2]; 
var a = imageData.data[index + 3]; 

, Javascript no pasa por referencia.