JavaScript如何對圖片進行黑白化
HTML5推出了<canvas>元素,使我們可以通過js動態(tài)的在 <canvas> 這個區(qū)域之中進行圖像的繪制。而我們這次對圖像的黑白化就是使用js操作<canvas>元素 來實現(xiàn)的。
先看一下效果圖
左側(cè)為 img標簽 , 右側(cè)為 canvas 元素標簽,結(jié)構(gòu)如下
<img src="1.jpg" style="width: 200px; height: 199px"/> <canvas id="drawing" width="200" height="199" ></canvas>
JS的代碼很簡單, 只有20多行 ,不過本著授人與魚不如授人于漁的態(tài)度,源碼會貼到最下面,我們先說理論。
1、關(guān)于圖片
大家應(yīng)該都知道,所謂圖片是由一個個的像素點組成的,也就是說一個 300*300大小的圖片,共有300*300的像素點,而每一個像素點都是由三原色(red,green,blue)加透明度(alpha)來組成。所以說如果我們希望改變圖像的圖像數(shù)據(jù),其實就是改變圖像每一個像素點的數(shù)據(jù)。
2、關(guān)于API
我們通過 var drawing = document.getElementById('drawing')
; 這個方法可以拿到 canvas對象,canvas對象提供了 2D、3D兩種繪圖方式,這里我們使用2D繪圖
使用 context2d = drawing.getContext('2d');
方法獲得context2d對象。拿到context2d對象之后,我們通過context2d提供的方法getImageData(),來獲取圖像數(shù)據(jù),getImageData()有4個參數(shù),分別表示畫面區(qū)域的 x 和 y 坐標以及該區(qū)域的像素寬度和高度 var imagedata = context2d.getImageData(0, 0, image.width, image.height);
ImageData 對象都有三個屬性:width、height 和
data。其中 data 屬性是一個數(shù)組,保存著圖像中每一個像素的數(shù)據(jù)。并通過,red,green,blue,alpha來表示。那么我們?nèi)绻胍淖儓D像的圖像數(shù)據(jù),就需要改變 imagedata的data屬性數(shù)據(jù),改變 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); }
總結(jié)
以上所述是小編給大家介紹JavaScript如何對圖片進行黑白化,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
Firefox+FireBug使JQuery的學(xué)習(xí)更加輕松愉快
FireBug是FireFox下最強大的調(diào)試插件.利用它,可以讓JQuery的學(xué)習(xí)過程更加輕松愉快.2010-01-01JS實現(xiàn)網(wǎng)頁游戲中滑塊響應(yīng)鼠標點擊移動效果
這篇文章主要介紹了JS實現(xiàn)網(wǎng)頁游戲中滑塊響應(yīng)鼠標點擊移動效果,涉及JavaScript針對頁面鼠標事件、滾動事件及元素屬性等相關(guān)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10javascript自執(zhí)行函數(shù)之偽命名空間封裝法
比較之后,我們可以發(fā)現(xiàn),第二方法更加的直觀,易于理解。但是少了封裝過程,代碼完全裸露在外。2010-12-12微信小程序MUI側(cè)滑導(dǎo)航菜單示例(Popup彈出式,左側(cè)不動,右側(cè)滑動)
這篇文章主要介紹了微信小程序MUI側(cè)滑導(dǎo)航菜單,結(jié)合實例形式分析了微信小程序Popup彈出式,左側(cè)不動,右側(cè)滑動菜單相關(guān)實現(xiàn)技巧與注意事項,需要的朋友可以參考下2019-01-01JS小功能(onmouseover實現(xiàn)選擇月份)實例代碼
這篇文章主要介紹了onmouseover實現(xiàn)選擇月份實例代碼,有需要的朋友可以參考一下2013-11-11