js 計算圖片內(nèi)點個數(shù)的示例代碼

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 21:59:27

js 計算圖片內(nèi)點個數(shù)的示例代碼

js 計算圖片內(nèi)點個數(shù)的示例代碼:前言圖片是由連續(xù)的點信息組成，每個點信息包含四個長度即rgba信息，通過遍歷配合處理函數(shù)實現(xiàn)對點個數(shù)的判斷。實現(xiàn)思路本例子采用png格式圖片，只需要判該點透明度（opacity）是否為0即可確定是否為小球上一點，如果不為0，判斷上下左右方向的點是否透

推薦度：

點擊下載本文 文檔為doc格式

導讀js 計算圖片內(nèi)點個數(shù)的示例代碼:前言圖片是由連續(xù)的點信息組成，每個點信息包含四個長度即rgba信息，通過遍歷配合處理函數(shù)實現(xiàn)對點個數(shù)的判斷。實現(xiàn)思路本例子采用png格式圖片，只需要判該點透明度（opacity）是否為0即可確定是否為小球上一點，如果不為0，判斷上下左右方向的點是否透

前言

圖片是由連續(xù)的點信息組成，每個點信息包含四個長度即rgba信息，通過遍歷配合處理函數(shù)實現(xiàn)對點個數(shù)的判斷。

實現(xiàn)思路

本例子采用png格式圖片，只需要判該點透明度（opacity）是否為0即可確定是否為小球上一點，如果不為0，判斷上下左右方向的點是否透明度為0，不為0遞歸該結(jié)果，并且將該點的rgba信息置為0；結(jié)束后開始下一個主循環(huán)并計數(shù)，直至循環(huán)結(jié)束。

具體步驟

創(chuàng)建canvas對象，加載目標圖片，使用canvas的drawImage方法將該圖片對象寫入canvas中；參數(shù)為圖片對象,貼圖起點橫坐標,貼圖起點縱坐標，貼圖寬度，貼圖高度。

var canvas = document.createElement('canvas'),
var ctx = canvas.getContext('2d');
ctx.drawImage(imgObj, 0, 0,imgWidth,imgHeight);

獲取圖片的相關信息canvas的getImageData方法，需要使用圖片上各點的rgba信息；參數(shù)為采點起始橫坐標,采點起始縱坐標，采點寬度，采點高度。

var imageData = ctx.getImageData(0,0,width,height);
//改寫imageData.data信息實現(xiàn)點的計數(shù)

遍歷圖片的點信息imageData.data，四個點為一組增長條件為i+4，當透明度不為0時調(diào)用處理函數(shù)，并且終止循環(huán)（終止循環(huán)，防止短時間內(nèi)循環(huán)次數(shù)過多造成內(nèi)存溢出），循環(huán)條件為numberStart<imageData.data.length-1 結(jié)束，number為最終的點數(shù)量;numberStart為上次循環(huán)結(jié)束時點的索引值，number為點的數(shù)量，judgeZero為處理函數(shù)。

 function repeateData(){
 for(var i=numberStart;i<imageData.data.length;i+=4){
 numberStart+=4;
 var a = imageData.data[i+3];
 if(a != 0) {
 judgeZero(i,number);
 break;
 }
 }
 if(numberStart<imageData.data.length-1){
 repeateData()
 }else{
 console.log(number);
 }
 }

點的處理函數(shù)，根據(jù)圖片的寬和高計算出點的坐標(x,y)，并且計算出該點上下左右四個點的透明度信息。

 function judgeZero(index){
 number++;
 clearPoints(index);
 }
 function clearPoints(index){
 var x = (index/4)%width,
 y = Math.floor(index/4/width);

 var up = (x+(y-1)*width)*4,
 down = (x+(y+1)*width)*4,
 right = (x+1+y*width)*4,
 left = (x-1+y*width)*4;

 var uA = imageData.data[up+3],
 bA = imageData.data[down+3],
 rA = imageData.data[right+3],
 lA = imageData.data[left+3];
 }
 function clearRgb(index){
 imageData.data[index] = 0;
 imageData.data[index+1] = 0;
 imageData.data[index+2] = 0;
 imageData.data[index+3] = 0;
 }

判斷四個方向的透明度是否為0，如果為0繼續(xù)調(diào)用，并且擦出該點信息。

 if(uA != 0){
 clearRgb(up);
 clearPoints(up);
 }
 if(bA != 0){
 clearRgb(down);
 clearPoints(down);
 }
 if(rA != 0){
 clearRgb(right);
 clearPoints(right);
 }
 if(lA != 0){
 clearRgb(left);
 clearPoints(left);
 }

將透明度不為0的所有點信息置為0，之后該點不會對主循環(huán)的判斷有影響。

 function clearRgb(index){
 imageData.data[index] = 0;
 imageData.data[index+1] = 0;
 imageData.data[index+2] = 0;
 imageData.data[index+3] = 0;
 }

執(zhí)行4，5，6步驟直至所有點rgba信息都被置為0，主循環(huán)繼續(xù)，最后可得到數(shù)量。

總結(jié)

主要的原理為獲取球上的一點，通過上下左右遞歸來判斷連續(xù)點并消除點信息，至該點的信息已在imageData.data中全部抹去，此過程記為1個點，主循環(huán)繼續(xù)；圖片為png格式，點的類型不限于圓形；該方法僅供參考。

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

js 計算圖片內(nèi)點個數(shù)的示例代碼

推薦度：

點擊下載本文 文檔為doc格式

標簽：圖片點的 js

熱門焦點

做爰高潮a片〈毛片〉,尤物av天堂一区二区在线观看,一本久久A久久精品VR综合,添女人荫蒂全部过程av

js 計算圖片內(nèi)點個數(shù)的示例代碼

js 計算圖片內(nèi)點個數(shù)的示例代碼

js 計算圖片內(nèi)點個數(shù)的示例代碼

最新推薦

猜你喜歡

熱門推薦