Image Manipulation с помощью Javascript?

Question

Я пытаюсь написать сценарий greasemonkey, и было бы предпочтительнее, если бы он мог работать с изображениями (в частности, найти самый темный пиксель в изображении). Есть ли способ сделать это или я должен встроить flash?

Answer 1

Поскольку это особый Firefox, вы можете использовать элемент холста. Я никогда не писал сценарий greasemonkey, поэтому я не знаю точно, как вы это сделаете, но идея в том, что вы создаете новый элемент холста и рисуете изображение на холсте. Затем вы можете получить значения пикселей из холста.

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

скрапа

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

часть, Javascript не проходит по ссылке.