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

先看一下效果圖

左側為 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 = document.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);
 }

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

推薦閱讀：

怎樣操作vue select組件使用與禁用

React使用時避免重渲染

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com