Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: Read Pixel?

  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Location
    USA
    Posts
    527
    Thanks
    26
    Thanked 74 Times in 72 Posts

    Read Pixel?

    Is it possible to read a pixel from an image with firefox's javascript (with chrome access)? I want to make a greasemonkey script that operates on a (very simple) captcha. If reading pixels is not possible in javascript, would anyone know if it is possible to have greasemonkey communicate information to and from something that can solve such a problem (eg: java)?
    Trinithis

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,276
    Thanks
    10
    Thanked 581 Times in 562 Posts
    in firefox, yes you can.
    you don't need anything but the canvas element.

    it provides an array of Numbers(0-255), where every 4 Numbers = 1 RGBA pixel.

    the image editor in my sig uses this for some of the filters like edge detection, some of the grayscale conversions, sharpen, etc.

    all the filters are functions, so viewing the source will show you several examples of using this pixel data.


    for example:
    Code:
    // image loader:
    function loadImg(srcImg) {
    	var img = new Image();
    	  img.onload = function(){ 	
    			var h=img.height,
    			w=img.width;
    			canvas.width=w;
    			canvas.height=h;
    			canvas.style.height=h+"px";
    			canvas.style.width=w+"px";
    
    			ctx = canvas.getContext('2d');
    			ctx.drawImage(img,0, 0,w,h);
    			tid=ctx.getImageData(0, 0, w, h);
    			mx=tid.data.length;
    	 	}//end onload
    
        	img.src= srcImg;	
    
    }//end loadImg
    
    
    function quickBW( ) {
    	var ctx = canvas.getContext('2d'),
    	tid=ctx.getImageData(0, 0, canvas.width, canvas.height),
    	mx=tid.data.length,
    	t=tid.data;
    
    	for(var z=0; z< mx;z+=4){
    		var col=parseInt( (t[z]+t[z+1]+t[z+2]) / 3  )
    		t[z]=col;
    		t[z+1]=col;
    		t[z+2]=col;
    	}
         ctx.putImageData(t, 0, 0, w, h);
    }//end desat
    canvas is a global, the canvas element via getElementById...
    Last edited by rnd me; 05-22-2009 at 02:52 AM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    Trinithis (05-22-2009)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •