JavaScript+Canvas實現彩

本文實例講述了+實現彩色圖片轉換成黑白圖片的方法。分享給大家供大家參考，具體如下：

1、()

在主體代碼中使用 元素的id來獲取畫布，并設置畫布的寬和高為圖片的寬和高，再將上下文初始化為2d畫布；彩色圖片加載完成后，使用 () 將圖片加載到上下文，調用用于完成剩余繪制工作的 ()和 ()；最后為指定彩色圖片的路徑。

2、()

使用 ()將圖像復制到 ，然后按照以下方式處理圖像：在圖像數據數組中移動，并收集前三個字節（紅色、綠色和藍色，忽略 ）的值；然后，該圖像將三個字節的值相加，并將總和除以3，計算結果將舍入為一個整數，并被寫入到這三個字節的值中。此值對應于顏色的色調，但灰度值從0到255，得到外觀與原始彩色圖片相同的黑白圖片。

3、()

() 將已更改的圖像數據寫回到畫布，通常用于讓另一個圖片執行實際處理，并僅在處理完成時顯示結果。

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);
}

更多關于相關內容感興趣的讀者可查看本站專題：《+特效與技巧匯總》、《圖片操作技巧大全》、《圖形繪制技巧總結》、《錯誤與調試技巧總結》、《數據結構與算法技巧總結》、《遍歷算法與技巧總結》及《數學運算用法總結》

希望本文所述對大家程序設計有所幫助。