在javascript中製作圖像灰度

Question

有沒有辦法使用純粹的JavaScript將圖像顯示爲灰度？

Answer 1

此鏈接中的最後一個例子：

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas

感謝MDN！

var img = new Image(); 
img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; 
img.onload = function() { 
    draw(this); 
}; 

function draw(img) { 
    var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 
    ctx.drawImage(img, 0, 0); 
    img.style.display = 'none'; 
    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); 
    var data = imageData.data; 


    var grayscale = function() { 
    for (var i = 0; i < data.length; i += 4) { 
     var avg = (data[i] + data[i + 1] + data[i + 2])/3; 
     data[i]  = avg; // red 
     data[i + 1] = avg; // green 
     data[i + 2] = avg; // blue 
    } 
    ctx.putImageData(imageData, 0, 0); 
    }; 

    var grayscalebtn = document.getElementById('grayscalebtn'); 
    grayscalebtn.addEventListener('click', grayscale); 
}