JS操作圖片黑白化

這次帶給大家JS操作圖片黑白化，JS操作圖片黑白化的注意事項有哪些，下面就是實戰案例，一起來看一下。

HTML5推出了元素，使我們可以透過js動態的在 這個區域之中進行影像的繪製。而我們這次對影像的黑白化就是使用js操作元素 來實現的。

先看一下效果圖

左邊為img標籤 ， 右邊為canvas 元素標籤，結構如下

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

JS的程式碼很簡單， 只有20多行，不過本著授人與魚不如授人於漁的態度，源碼會貼到最下面，我們先說理論。

1、關於圖片

 大家應該都知道，所謂圖片是由一個個的像素點組成的，也就是說一個300*300大小的圖片，共有300*300的像素點，而每一個像素點都是由三原色（red,green,blue）加透明度(alpha)來組成。所以說如果我們希望改變影像的影像數據，其實就是改變影像每一個像素點的資料。

2、關於API

我們透過var drawing = <a href="http://www.php.cn/code/658.html" target="_blank">document</a>.getElementById('drawing'); 這個方法可以拿到canvas對象，canvas物件提供了2D、3D兩種繪圖方式，這裡我們使用2D繪圖
 使用context2d = drawing.getContext('2d'); 方法取得context2d物件。拿到context2d物件之後，我們透過context2d提供的方法getImageData(),取得影像數據，getImageData()有4個參數，分別表示畫面區域的x 和y 座標以及該區域的像素寬度和高度 var imagedata = context2d.getImageData(0, 0, image.width, image.height); 

 ImageData 物件都有三個屬性:width、height 和
data。其中 data 屬性是一個陣列，保存著影像中每一個像素的資料。並通過，red，green，blue，alpha來表示。那我們如果想要改變圖像的圖像數據，就需要改變 imagedata的data屬性數據，改變 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);
    }

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

怎麼操作vue select元件使用與停用

#React使用時避免重渲染

以上是JS操作圖片黑白化的詳細內容。更多資訊請關注PHP中文網其他相關文章！