淺談JavaScript和Canvas實現彩色圖片轉換成黑白圖片

1、convertToGray()

在主體程式碼中使用 canvas 元素的id來獲取畫布，並設定畫布的寬和高為圖片的寬和高，再將上下文初始化為2d畫布；彩色圖片載入完成後，使用 drawImage() 將圖片載入到上下文，呼叫用於完成剩餘繪製工作的 getColorData()和 putColorData()；最後為myImage指定彩色圖片的路徑。

2、getColorData()

使用 getImageData()將影像複製到 myImage，然後按照以下方式處理影像：在影像資料陣列中移動，並收集前三個位元組（紅色、綠色和藍色，忽略 alpha）的值；然後，該影像將三個位元組的值相加，並將總和除以3，計算結果將舍入為一個整數，並被寫入到這三個位元組的值中。此值對應於顏色的色調，但灰度值從0到255，得到外觀與原始彩色圖片相同的黑白圖片。

 

3、putColorData()

putImageData() 將已更改的影像資料寫回到畫布，通常用於讓另一個圖片執行實際處理，並僅在處理完成時顯示結果。

var canvas, ctx, myImage;  
function convertToGray() {
	myImage = document.getElementById("img");
	canvas = document.getElementById("myCanvas");
	canvas.width = img.width;
	canvas.height = img.height;
	if (canvas.getContext) {
		ctx = canvas.getContext("2d");
		myImage.onload = function() {
			ctx.drawImage(myImage, 0, 0);
			getColorData();
			putColorData();
		}
		myImage.src = "images/img8.jpg";
	}
}
function getColorData() {
	var length = canvas.width * canvas.height;
	myImage = ctx.getImageData(0, 0, canvas.width, canvas.height);
	for (var i = 0; i < length * 4; i += 4) {
		var myRed = myImage.data[i];
		var myGreen = myImage.data[i + 1];
		var myBlue = myImage.data[i + 2];
		myGray = parseInt((myRed + myGreen + myBlue) / 3);
		myImage.data[i] = myGray;
		myImage.data[i + 1] = myGray;
		myImage.data[i + 2] = myGray;
	}
}      
function putColorData() {
	ctx.putImageData(myImage, 0, 0);
}