快捷導(dǎo)航

JavaScript+Canvas實(shí)現(xiàn)彩色圖片轉(zhuǎn)換成黑白圖片的方法分析

更新時(shí)間：2018年07月31日 10:23:06 作者：筱葭

這篇文章主要介紹了JavaScript+Canvas實(shí)現(xiàn)彩色圖片轉(zhuǎn)換成黑白圖片的方法,結(jié)合實(shí)例形式分析了javascript結(jié)合HTML5相關(guān)函數(shù)修改頁(yè)面圖片元素顯示效果相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript+Canvas實(shí)現(xiàn)彩色圖片轉(zhuǎn)換成黑白圖片的方法。分享給大家供大家參考，具體如下：

1、convertToGray()

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

2、getColorData()

使用 getImageData()將圖像復(fù)制到 myImage，然后按照以下方式處理圖像：在圖像數(shù)據(jù)數(shù)組中移動(dòng)，并收集前三個(gè)字節(jié)（紅色、綠色和藍(lán)色，忽略 alpha）的值；然后，該圖像將三個(gè)字節(jié)的值相加，并將總和除以3，計(jì)算結(jié)果將舍入為一個(gè)整數(shù)，并被寫(xiě)入到這三個(gè)字節(jié)的值中。此值對(duì)應(yīng)于顏色的色調(diào)，但灰度值從0到255，得到外觀(guān)與原始彩色圖片相同的黑白圖片。

3、putColorData()

putImageData() 將已更改的圖像數(shù)據(jù)寫(xiě)回到畫(huà)布，通常用于讓另一個(gè)圖片執(zhí)行實(shí)際處理，并僅在處理完成時(shí)顯示結(jié)果。

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

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript+HTML5特效與技巧匯總》、《JavaScript圖片操作技巧大全》、《JavaScript圖形繪制技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: