Javascript ile Görüntü Manipülasyonu?

Question

Bir greasemonkey komut dosyası yazmaya çalışıyorum ve resimlerle çalışabilmesi (özellikle bir görüntüdeki en koyu pikseli bulmak) tercih edilir. Bunu yapmanın bir yolu var mı yoksa flaşı mı gömmeliyim?

Answer 1

Firefox'a özel olduğundan, bir tuval öğesi kullanabilirsiniz. Bir greasemonkey senaryosu yazmamıştım, bu yüzden nasıl yapacağınızı tam olarak bilmiyorum, ama fikir, yeni bir tuval elemanı yaratıp, resmi tuval üzerine çiziyorsunuz. Daha sonra, piksel değerlerini tuvalden alabilirsiniz.

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

Hurda

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

kısmı JavaScript referans olarak geçmez.