JS對圖片進行黑白化設置

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

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

先看一下效果圖

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

<img  src="/static/imghwm/default1.png" data-src="1.jpg" class="lazy" alt="JS對圖片進行黑白化設置" >
<canvas></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 <p>相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ </p><p>推薦閱讀：</p><p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-394735.html" target="_blank">判斷上傳圖片類型與大小需要哪些步驟</a><br></p><p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-394737.html" target="_blank">#合併多個陣列時如何去重資料</a><br></p><p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-394716.html" target="_blank">React props與state屬性使用詳解</a><br></p>

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