溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
HTML5推出了<canvas>元素，使我們可以通過js動態的在 <canvas> 這個區域之中進行圖像的繪制。而我們這次對圖像的黑白化就是使用js操作<canvas>元素 來實現的。
先看一下效果圖
左側為 img標簽 ， 右側為 canvas 元素標簽，結構如下
<img src="1.jpg" /> <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);
}
總結
以上所述是小編給大家介紹JavaScript如何對圖片進行黑白化，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
