使用JavaScript怎么 計算圖片內(nèi)點(diǎn)個數(shù)

使用JavaScript怎么 計算圖片內(nèi)點(diǎn)個數(shù)？相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

JavaScript的作用是什么

1、能夠嵌入動態(tài)文本于HTML頁面。2、對瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。5、檢測訪客的瀏覽器信息。6、控制cookies，包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。

具體步驟

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

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

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

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

遍歷圖片的點(diǎn)信息imageData.data，四個點(diǎn)為一組增長條件為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為最終的點(diǎn)數(shù)量;numberStart為上次循環(huán)結(jié)束時點(diǎn)的索引值，number為點(diǎn)的數(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);
    }
  }

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

  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)用，并且擦出該點(diǎn)信息。

  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的所有點(diǎn)信息置為0，之后該點(diǎn)不會對主循環(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步驟直至所有點(diǎn)rgba信息都被置為0，主循環(huán)繼續(xù)，最后可得到數(shù)量。

看完上述內(nèi)容，你們掌握使用JavaScript怎么 計算圖片內(nèi)點(diǎn)個數(shù)的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！