了解canvas如何将图像转换为黑白图片

Question

我发现了一个将图片转换为黑白的脚本，它的效果很好，但我希望更好地理解其代码。我在代码中用注释的形式提出了我的问题。

有没有人能够详细解释一下这里正在发生的事情？

function grayscale(src){ //Creates a canvas element with a grayscale version of the color image
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var imgObj = new Image();
    imgObj.src = src;
    canvas.width = imgObj.width;
    canvas.height = imgObj.height; 
    ctx.drawImage(imgObj, 0, 0); //Are these CTX functions documented somewhere where I can see what parameters they require / what those parameters mean?
    var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
    for(var y = 0; y < imgPixels.height; y++){
        for(var x = 0; x < imgPixels.width; x++){
            var i = (y * 4) * imgPixels.width + x * 4; //Why is this multiplied by 4?
            var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3; //Is this getting the average of the values of each channel R G and B, and converting them to BW(?)
            imgPixels.data[i] = avg; 
            imgPixels.data[i + 1] = avg; 
            imgPixels.data[i + 2] = avg;
        }
    }
    ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height); 
    return canvas.toDataURL();
}

- mheavers

Answer 1

1. Canvas函数的使用方法，像大多数函数一样，在官方规范中有描述。 此外，MDC对于更“非正式”的文章也很有帮助。例如，MDC上的drawImage函数在这里。

2. getImageData函数返回一个包含所有像素字节数据的数组的对象。 每个像素由4个字节描述：r，g，b和a。

   r，g和b是颜色分量（红色，绿色和蓝色），而alpha是不透明度。 因此，每个像素使用4个字节，因此像素的数据从pixel_index *4开始。

3. 是的，它正在计算值的平均值。 因为在接下来的3行中，r，g和b都设置为相同的值，所以每个像素将获得一个灰色的颜色（因为所有3个组件的数量相同）。

   因此，基本上对于所有像素都会保持：r === g，g === b，因此也会有r === b。 满足这个条件的颜色是灰度（0, 0, 0是黑色，255, 255, 255是白色）。

- pimvdb

Answer 2

function grayscale(src){ //Creates a canvas element with a grayscale version of the color image
    //create canvas
    var canvas = document.createElement('canvas');
    //get its context
    var ctx = canvas.getContext('2d');
    //create empty image
    var imgObj = new Image();
    //start to load image from src url
    imgObj.src = src;
    //resize canvas up to size image size
    canvas.width = imgObj.width;
    canvas.height = imgObj.height;
    //draw image on canvas, full canvas API is described here http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html
    ctx.drawImage(imgObj, 0, 0);
    //get array of image pixels
    var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
    //run through all the pixels
    for(var y = 0; y < imgPixels.height; y++){
        for(var x = 0; x < imgPixels.width; x++){
            //here is x and y are multiplied by 4 because every pixel is four bytes: red, green, blue, alpha
            var i = (y * 4) * imgPixels.width + x * 4; //Why is this multiplied by 4?
            //compute average value for colors, this will convert it to bw
            var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
            //set values to array
            imgPixels.data[i] = avg; 
            imgPixels.data[i + 1] = avg; 
            imgPixels.data[i + 2] = avg;
        }
    }
    //draw pixels according to computed colors
    ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height); 
    return canvas.toDataURL();
}

在这个函数中使用了系数1/3，然而通常使用的是：0.3R + 0.59G + 0.11B (http://gimp-savvy.com/BOOK/index.html?node54.html)。

- bjornd

---

即使是黑白/灰度图像，存储的图像仍然以全彩色模式存储，对吗？如果我想要一个纯黑白画布，并将其保存为黑白图像（文件大小更小），该怎么办？ - Ωmega