快捷導(dǎo)航

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

更新時間：2019年04月04日 08:28:30 作者：sXin

這篇文章主要介紹了js 計算圖片內(nèi)點個數(shù)的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

圖片是由連續(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對象，加載目標(biāo)圖片，使用canvas的drawImage方法將該圖片對象寫入canvas中；參數(shù)為圖片對象,貼圖起點橫坐標(biāo),貼圖起點縱坐標(biāo)，貼圖寬度，貼圖高度。

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

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

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

遍歷圖片的點信息imageData.data，四個點為一組增長條件為i+4，當(dāng)透明度不為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ù)圖片的寬和高計算出點的坐標(biāo)(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格式，點的類型不限于圓形；該方法僅供參考。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: