Manipulation d'image avec Javascript?

Question

J'essaie d'écrire un script greasemonkey, et il serait préférable qu'il soit capable de travailler avec des images (en particulier, trouver le pixel le plus sombre dans une image). Y at-il un moyen de le faire ou dois-je intégrer le flash?

Answer 1

Puisqu'il est spécifique à Firefox, vous pouvez utiliser un élément canvas. Je n'ai jamais écrit un script greasemonkey, donc je ne sais pas exactement comment vous le feriez, mais l'idée est, vous créez un nouvel élément canvas et dessinez l'image sur la toile. Ensuite, vous pouvez obtenir les valeurs de pixels de la toile.

// 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

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

partie, Javascript ne passe pas par référence.