I want to implement gray scale of an image

I want to implement gray scale of an image

BY 01 Oct 2015 Web Application Development

Hi,

    My gray scale is not working when i want to retrieve image from gallery and make it gray scale.But it work fine when i give direct path.

It not convert the image which is selected by user from gallery.If i give direct path then it work fine.

I have created a session variable which has the path of image selected by user from gallery.But it not work for gray scale.

      

function grayscale(img) {
var canvas = document.getElementById(“box2”);
    var ctx = canvas.getContext(‘2d’);
    
    ctx.drawImage(img, 0, 0);
    var img_data = ctx.getImageData(0, 0, img.width, img.height);
    var data = img_data.data;
    for (var i=0; i<data.length; i+=4) {
        var brightness = 0.2126 * data[i] + 0.7152 * data[i+1] + 0.0722 * data[i+2];
        data[i] = brightness;
        data[i+1] = brightness;
        data[i+2] = brightness;
    }

    ctx.putImageData(img_data, 0, 0);
}
var img11 = new Image();

function mohitji()
{    
img11.onload = function() { grayscale(this); }
var sss = sessionStorage.getItem(“mohit”);
img11.src =sss;    //this not work

//img11.src=”images/girls1.jpg”;  //this work fine
}

Please Help me

Thanks and regards

Mohit Kumar

 

 

 

 

Written by