Как установить альфа-канал в холсте при гранулировании

Question

Я использую HTML canvas, чтобы получить изображение в оттенках серого, и я не хочу просто усреднять его. Поэтому я использую эту функцию

var imageData = ctx.getImageData(0,0,canvas.width, canvas.height); 
    var data= imageData.data 
    for (var i = 0; i < data.length; i += 4) { 
     var grayscale = (data[i]*0.2126 + data[i +1]*0.7152 + data[i +2])*0.0722; 
     data[i]  = grayscale; // red 
     data[i + 1] = grayscale; // green 
     data[i + 2] = grayscale; // blue 
    } 
    ctx.putImageData(imageData, 0, 0); 
} 

Проблема, однако, если изображение имеет белый фон, оно будет превращено в черный. Так что попробовал data[i + 3] = 255; для альфа-канала, но это превратило весь холст в черный.

Что я делаю неправильно?

Answer 1

Проблема заключается в этой строке:

var grayscale = (data[i]*0.2126 + data[i +1]*0.7152 + data[i +2])*0.0722; 

Заметим, что последние постоянные умножает весь expresion слева от него, в то время как он должен только приумножаться data[i+2]:

var grayscale = data[i]*0.2126 + data[i + 1]*0.7152 + data[i + 2]*0.0722; 

jsfiddle