這篇文章主要介紹了JS對圖片進行黑白化的實現代碼，現在分享給大家，需要的朋友可以參考下
HTML5推出了
先看一下效果圖
左邊為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); <br/>
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);
}#相關推薦：
########################### ###################
以上是JavaScript如何對圖片進行黑白化_javascript技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！
