Манипулирование изображениями с помощью Javascript? - PullRequest
Новая
       16

Манипулирование изображениями с помощью Javascript?

6 голосов
/ 14 декабря 2008

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

Ответы [ 2 ]

8 голосов
/ 14 декабря 2008

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

// 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
    }
}
1 голос
/ 13 июля 2009

Лом 

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

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

...