Холст: преобразовать изображения в оттенки серого

Question

var canvas = document.createElement('canvas'); 
var canvasContext = canvas.getContext('2d'); 
var imgW = imgObj.width; 
var imgH = imgObj.height; 
canvas.width = imgW; 
canvas.height = imgH; 
canvasContext.drawImage(imgObj, 0, 0); 
var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH); 
for(>var y = 0; y < imgPixels.height; y++){ 
for(>var x = 0; x < imgPixels.width; x++){ 
     var i = (y * 4) * imgPixels.width + x * 4; 
     var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2])/3; 
     imgPixels.data[i] = avg; 
     imgPixels.data[i + 1] = avg; 
     imgPixels.data[i + 2] = avg; 
} 
} 

canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height); 
return canvas.toDataURL(); 

коды, приведенные выше, являются стандартной реализацией. здесь конкретный код: var i = (y * 4) * imgPixels.width + x * 4; Я знаю, что мы должны понять, каждый пиксель и получить среднее, но я знаю, почему бы это использовать (y * 4)* imgPixel.width + x * 4

Я первокурсник из Китая, надеюсь, что я могу получить помощь от всех вы. Если вы можете мне помочь, я бы очень признателен. благодаря!

Answer 1

Изображение представлено одномерным массивом значений. Каждый пиксель в изображении потребляет 4 последовательных входа в массиве. Эти четыре значения представляют собой красный, синий, зеленый и альфа (прозрачные) каналы пикселя изображения.

Это выражение преобразует концептуальное расположение пикселя в точку в линейном массиве, где могут быть найдены четыре значения, соответствующие этому местоположению. Координата y дает строку пикселя, поэтому y умножается на ширину изображения —. Каждая строка изображения потребляет столько пикселей. Координата x - это смещение в эту строку. Каждое из значений y и x должно быть умножено на 4 для учета четырехступенчатого представления каждого пикселя.