使用Javascript进行图像处理?

时间:2008-12-14 03:44:47

标签: javascript image-manipulation greasemonkey

我正在尝试编写一个greasemonkey脚本,最好是能够处理图像(特别是找到图像中最暗的像素)。有没有办法做到这一点,还是我必须嵌入闪存?

2 个答案:

答案 0 :(得分:8)

由于它是特定于Firefox的,因此您可以使用canvas元素。我从来没有写过一个关于paintmonkey的脚本,所以我不确切知道你会怎么做,但想法是,你创建一个新的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 :(得分:1)

报废

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

部分,Javascript不通过引用传递。