本文實例講述了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);}更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript+HTML5特效與技巧匯總》、《JavaScript圖片操作技巧大全》、《JavaScript圖形繪制技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
