JavaScript實(shí)現(xiàn)256色轉(zhuǎn)灰度圖
一幅完整的圖像,是由紅色、綠色、藍(lán)色三個(gè)通道組成的。紅色、綠色、藍(lán)色三個(gè)通道的縮覽圖都是以灰度顯示的。用不同的灰度色階來(lái)表示" 紅,綠,藍(lán)"在圖像中的比重。通道中的純白,代表了該色光在此處為最高亮度,亮度級(jí)別是255。
灰度化方法:
1.浮點(diǎn)算法:Gray = R*0.299 + G*0.587 + B*0.114
2.整數(shù)方法:Gray = (R*299 + G*587 + B*114 + 500) / 1000
3.移位方法:Gray =(R*28+G*151+B*77)>>8;
4.平均值法:Gray=(R+G+B)/3;
5.僅取綠色:Gray=G;
只要將原來(lái)的RGB(R,G,B)中的R,G,B統(tǒng)一用Gray替換,形成新的RGB(Gray,Gray,Gray)就完成灰度化了;
效果圖:
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ImgBase</title> <style type="text/css"> .scream{ width:400px; height:300px; position: absolute; top:60px; border: 1px solid; } #canvas{ position: absolute; top:60px; left:500px; border: 1px dashed; } </style> </head> <body> <input type="file" onchange="loadImg()"/> <input type="button" value="灰度化" onclick="Convert256toGray()"/> <br/><br/> <div class="scream"> <img id="scream" width="400px" height="300px" alt="Image preview..."> </div> <canvas id="canvas" width="400px;" height="300px;"> your browser does not support canvas! </canvas> <script> function Convert256toGray(){ var c=document.getElementById("canvas"); var ctx=c.getContext("2d"); var imgData = ctx.getImageData(0,0,c_w,c_h); for (var i=0;i<imgData.data.length;i+=4) { var R = imgData.data[i]; //R(0-255) var G = imgData.data[i+1]; //G(0-255) var B = imgData.data[i+2]; //G(0-255) var Alpha = imgData.data[i+3]; //Alpha(0-255) //浮點(diǎn)算法 var gray = R*0.299 + G*0.587 + B*0.114; //整數(shù)算法 // var gray = (R*299 + G*587 + B*114 + 500) / 1000; //移位算法 // var gray =(R*76+G*151+B*28)>>8; //平均值算法 // var gray = (R+G+B)/3; //僅取綠色 // var gray=G; imgData.data[i] = gray; imgData.data[i+1] = gray; imgData.data[i+2] = gray; imgData.data[i+3] = Alpha; } ctx.putImageData(imgData,0,0); } </script> <!--base--> <script> //canvas圖像的寬高 var c_w = 400; var c_h = 300; //加載img圖像 function loadImg(){ var img = document.getElementById("scream"); var file = document.querySelector('input[type=file]').files[0]; if(!/image\/\w+/.test(file.type)){ alert("文件必須為圖片!"); return false; } var reader = new FileReader(); reader.addEventListener("load", function () { img.src = reader.result; }, false); if(file) { reader.readAsDataURL(file); loadCanvas(); } } //加載canvas圖像 function loadCanvas(){ var c=document.getElementById("canvas"); var ctx=c.getContext("2d"); var img = document.getElementById("scream"); img.onload = function() { ctx.drawImage(img,0,0,c_w,c_h); } } </script> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
iframe高度自適應(yīng)及隱藏滾動(dòng)條的實(shí)例詳解
這篇文章主要介紹了iframe高度自適應(yīng)及隱藏滾動(dòng)條的實(shí)例詳解的相關(guān)資料,希望通過(guò)本文能幫助到大家,需要的朋友可以參考下2017-09-09js獲取本機(jī)的外網(wǎng)/廣域網(wǎng)ip地址完整源碼
通過(guò)js獲取本機(jī)的外網(wǎng)和廣域網(wǎng)ip地址的方法有很多,本文為大家介紹個(gè)不錯(cuò)的方法,希望對(duì)大家有所幫助2013-08-08js實(shí)現(xiàn)兼容性好的微軟官網(wǎng)導(dǎo)航下拉菜單效果
這篇文章主要介紹了js實(shí)現(xiàn)兼容性好的微軟官網(wǎng)導(dǎo)航下拉菜單效果,涉及JavaScript基于鼠標(biāo)事件實(shí)現(xiàn)頁(yè)面樣式變換的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09詳解JavaScript基于面向?qū)ο笾畡?chuàng)建對(duì)象(1)
這篇文章主要介紹了JavaScript基于面向?qū)ο笾畡?chuàng)建對(duì)象,對(duì)創(chuàng)建對(duì)象進(jìn)行了詳細(xì)描述,感興趣的小伙伴們可以參考一下2015-12-12前端使用axios實(shí)現(xiàn)下載文件功能的詳細(xì)過(guò)程
項(xiàng)目中經(jīng)常會(huì)遇到需要導(dǎo)出列表內(nèi)容,或者下載文件之類的需求,下面這篇文章主要給大家介紹了關(guān)于前端使用axios實(shí)現(xiàn)下載文件功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08JS之延時(shí)器和定時(shí)器執(zhí)行示例詳解
這篇文章主要為大家介紹了JS之延時(shí)器和定時(shí)器執(zhí)行示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07微信小程序?qū)崿F(xiàn)列表?xiàng)l件篩選
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)列表?xiàng)l件篩選,篩選框的效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07JS實(shí)現(xiàn)控制表格內(nèi)指定單元格內(nèi)容對(duì)齊的方法
這篇文章主要介紹了JS實(shí)現(xiàn)控制表格內(nèi)指定單元格內(nèi)容對(duì)齊的方法,涉及javascript操作表格單元格內(nèi)容樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03IScroll5 中文API參數(shù)說(shuō)明和調(diào)用方法
IScroll是移動(dòng)頁(yè)面上被使用的一款仿系統(tǒng)滾動(dòng)插件。IScroll5相對(duì)于之前的IScroll4改進(jìn)了許多,使得大家可以更方便的定制所需的功能了。2016-05-05