Понимание того, как canvas преобразует изображение в черно-белое - PullRequest
Новая
       11

Понимание того, как canvas преобразует изображение в черно-белое

3 голосов
/ 21 сентября 2011

Я нашел этот скрипт для преобразования изображения в черно-белое, который прекрасно работает, но я надеялся немного лучше понять код.Я ставлю свои вопросы в коде, в форме комментариев.

Может кто-нибудь объяснить чуть подробнее, что здесь происходит: 

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();
}

Ответы [ 2 ]

11 голосов
/ 21 сентября 2011

  1. Функции холста, как и большинство функций, описаны в официальной спецификации . Кроме того, MDC полезен для более "неформальных" статей. Например. drawImage функция на MDC здесь .

  2. Функция getImageData возвращает объект, который содержит массив с байтовыми данными всех пикселей. Каждый пиксель описывается 4 байтами: r, g, b и a.

    r, g и b - это цветовые компоненты (красный, зеленый и синий), а альфа - непрозрачность. Таким образом, каждый пиксель использует 4 байта, и поэтому данные пикселя начинаются с pixel_index * 4.

  3. Да, это усреднение значений. Поскольку в следующих 3 строках r, g и b установлены на одно и то же значение, вы получите серый цвет для каждого пикселя (поскольку количество всех трех компонентов одинаковое).

    Таким образом, в основном, для всех пикселей это будет иметь место: r === g, g === b и, следовательно, также r === b. Цвета, для которых это верно, - это оттенки серого (0, 0, 0 - черный, 255, 255, 255 - белый).

8 голосов
/ 21 сентября 2011 
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).

...