js 計算圖片內點個數的示例代碼

來源：懂視網責編：小采時間：2020-11-27 21:59:27

js 計算圖片內點個數的示例代碼

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

推薦度：

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

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

前言

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

實現思路

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

具體步驟

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

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

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

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

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

 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);
 }
 }

點的處理函數，根據圖片的寬和高計算出點的坐標(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繼續調用，并且擦出該點信息。

 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，之后該點不會對主循環的判斷有影響。

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

執行4，5，6步驟直至所有點rgba信息都被置為0，主循環繼續，最后可得到數量。

總結

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

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

js 計算圖片內點個數的示例代碼

推薦度：

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

標簽：圖片點的 js

熱門焦點

国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

js 計算圖片內點個數的示例代碼

js 計算圖片內點個數的示例代碼

js 計算圖片內點個數的示例代碼

最新推薦

猜你喜歡

熱門推薦