Converting image to black and white with Javascript

Question

I have a js function, it returns the image on canvas that I give in the source and B&W of it side by side, the thing is I am a beginner in js so I do not know which line should I edit to get the only B&W image as a result on the canvas not the original image.

function imageLoaded(ev) {

    element = document.getElementById("canvas");
    const c = element.getContext("2d");

    im = ev.target;

    width = element.width;
    height = element.height;

    //image on the left of the canvas:
    c.drawImage(im, 0, 0);

    let imageData = c.getImageData(0, 0, width, height);

    // width index is output position.
    w2 = width / 2;

    // run through the image. 
    //  height of the image.
    for (y = 0; y < height; y++) {
        // *4 for 4 ints per pixel.
        //this is an input index.
        inpos = y * width * 4;
        //this is an output index.
        outpos = inpos + w2 * 4
            // width of the image.
        for (x = 0; x < w2; x++) {
            r = imageData.data[inpos++];
            g = imageData.data[inpos++];
            b = imageData.data[inpos++];
            a = imageData.data[inpos++];
            // this is transforming  RGB color space to gray scale.
            gray = (0.30 * r + 0.59 * g + 0.11 * b);
            // proper threshold value for black and white
            if (gray > 55) {
                //set the pixel to white.
                imageData.data[outpos++] = 255;
                imageData.data[outpos++] = 255;
                imageData.data[outpos++] = 255;
                imageData.data[outpos++] = a;
            } else {
                //set the pixel to black.
                imageData.data[outpos++] = 0;
                imageData.data[outpos++] = 0;
                imageData.data[outpos++] = 0;
                imageData.data[outpos++] = a;
            }
        }
    }
    //put pixel data on canvas.
    c.putImageData(imageData, 0, 0);
}

im = new Image();

im.onload = imageLoaded;

//im.src = "B_01.jpg";
//im.src = "img.png";
//im.src = "164228060-dodge-challenger-wallpapers.jpg";
im.src = "rab.jpg";
//im.src = "https://picsum.photos/id/431/200/300";

it is a good idea, to declare **all** variables in advance, otherwise the variables are *global*. — Nina Scholz, Oct 21 '19 at 08:41

score 0 · Accepted Answer · answered Oct 21 '19 at 08:34

Here is the final code:

function imageLoaded(ev) {

element = document.getElementById("canvas");
const c = element.getContext("2d");

im = ev.target;

width = element.width;
height = element.height;

//image on the left of the canvas:
c.drawImage(im, 0, 0);

let imageData = c.getImageData(0, 0, width, height);

// width index is output position.
w2 = width;

// run through the image. 
//  height of the image.
for (y = 0; y < height; y++) {
    // *4 for 4 ints per pixel.
    //this is an input index.
    inpos = y * width * 4;
    //this is an output index.
    outpos = inpos;
        // width of the image.
    for (x = 0; x < w2; x++) {
        r = imageData.data[inpos++];
        g = imageData.data[inpos++];
        b = imageData.data[inpos++];
        a = imageData.data[inpos++];
        // this is transforming  RGB color space to gray scale.
        gray = (0.30 * r + 0.59 * g + 0.11 * b);
        // proper threshold value for black and white
        if (gray > 55) {
            //set the pixel to white.
            imageData.data[outpos++] = 255;
            imageData.data[outpos++] = 255;
            imageData.data[outpos++] = 255;
            imageData.data[outpos++] = a;
        } else {
            //set the pixel to black.
            imageData.data[outpos++] = 0;
            imageData.data[outpos++] = 0;
            imageData.data[outpos++] = 0;
            imageData.data[outpos++] = a;
        }
    }
}
//put pixel data on canvas.
c.putImageData(imageData, 0, 0);
}

im = new Image();

im.onload = imageLoaded;

im.src = "rab.jpg";

I have changed two things:

I removed the division by 2, so you can see the full image:

// width index is output position.
w2 = width;

And I set outpos equal to inpos:

//this is an input index.
inpos = y * width * 4;
//this is an output index.
outpos = inpos;

This mean that the input position ist the same as the output position, which causes an override of the current pixel color.

Converting image to black and white with Javascript

1 Answers1