HTML5推出了<canvas>元素，使我們可以通過(guò)js動(dòng)態(tài)的在 <canvas> 這個(gè)區(qū)域之中進(jìn)行圖像的繪制。而我們這次對(duì)圖像的黑白化就是使用js操作<canvas>元素 來(lái)實(shí)現(xiàn)的。

先看一下效果圖

左側(cè)為 img標(biāo)簽 ， 右側(cè)為 canvas 元素標(biāo)簽，結(jié)構(gòu)如下

<img src="1.jpg" style="width: 200px; height: 199px"/>
<canvas id="drawing" width="200" height="199" ></canvas>

JS的代碼很簡(jiǎn)單， 只有20多行 ，不過(guò)本著授人與魚(yú)不如授人于漁的態(tài)度，源碼會(huì)貼到最下面，我們先說(shuō)理論。

1、關(guān)于圖片

 大家應(yīng)該都知道，所謂圖片是由一個(gè)個(gè)的像素點(diǎn)組成的，也就是說(shuō)一個(gè) 300*300大小的圖片，共有300*300的像素點(diǎn)，而每一個(gè)像素點(diǎn)都是由三原色（red,green,blue）加透明度(alpha)來(lái)組成。所以說(shuō)如果我們希望改變圖像的圖像數(shù)據(jù)，其實(shí)就是改變圖像每一個(gè)像素點(diǎn)的數(shù)據(jù)。

2、關(guān)于API

我們通過(guò) var drawing = document.getElementById('drawing'); 這個(gè)方法可以拿到 canvas對(duì)象，canvas對(duì)象提供了 2D、3D兩種繪圖方式，這里我們使用2D繪圖
 使用 context2d = drawing.getContext('2d'); 方法獲得context2d對(duì)象。拿到context2d對(duì)象之后，我們通過(guò)context2d提供的方法getImageData(),來(lái)獲取圖像數(shù)據(jù)，getImageData()有4個(gè)參數(shù)，分別表示畫(huà)面區(qū)域的 x 和 y 坐標(biāo)以及該區(qū)域的像素寬度和高度 var imagedata = context2d.getImageData(0, 0, image.width, image.height); 


 ImageData 對(duì)象都有三個(gè)屬性:width、height 和
data。其中 data 屬性是一個(gè)數(shù)組，保存著圖像中每一個(gè)像素的數(shù)據(jù)。并通過(guò)，red，green，blue，alpha來(lái)表示。那么我們?nèi)绻胍淖儓D像的圖像數(shù)據(jù)，就需要改變 imagedata的data屬性數(shù)據(jù)，改變 red，green，blue，alpha 的值。

這里是源代碼

function drawImageData () {
      var context2d = null;
      if(drawing.getContext) {
        context2d = drawing.getContext('2d');
      }
      if (context2d == null) {
        return;
      }
      var image = document.images[0];
      context2d.drawImage(image, 0 , 0);
      var imagedata = context2d.getImageData(0, 0, image.width, image.height);
      var data = imagedata.data;
      console.log('data: ' + data);
      var i,len,red,green,blue,alpha,average;
      for (i = 0 , len = data.length; i < len; i+=4) {
        red = data[i];
        green = data[i + 1];
        blue = data[i + 2];
        alpha = data[i + 3];
        average = Math.floor((red + green + blue) / 3);
        data[i] = average; 
        data[i+1] = average; 
        data[i+2] = average;
      }
      imagedata.data = data;
      context2d.putImageData(imagedata, 0, 0);
    }

總結(jié)

以上所述是小編給大家介紹JavaScript如何對(duì)圖片進(jìn)行黑白化，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！