Question

我有一个js函数，它返回画布上我在源代码和黑白中并排给出的图像，问题是我是js的初学者，所以我不知道应该编辑哪一行画布上唯一的黑白图像，而不是原始图像。

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";

Answer 1

这是最终代码：

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";

我已经改变了两件事：

我将除以2，所以您可以看到完整图像：

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

我将outpos设置为inpos：

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

这意味着输入位置与输出位置相同，这会导致当前像素颜色的覆盖。

使用Javascript将图像转换成黑白图像

1 个答案: