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

創(chuàng)新互聯(lián)長(zhǎng)期為千余家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為通州企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)，通州網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

JavaScript的作用是什么

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

具體步驟

創(chuàng)建canvas對(duì)象，加載目標(biāo)圖片，使用canvas的drawImage方法將該圖片對(duì)象寫入canvas中；參數(shù)為圖片對(duì)象,貼圖起點(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)的計(jì)數(shù)

遍歷圖片的點(diǎn)信息imageData.data，四個(gè)點(diǎn)為一組增長(zhǎng)條件為i+4，當(dāng)透明度不為0時(shí)調(diào)用處理函數(shù)，并且終止循環(huán)（終止循環(huán)，防止短時(shí)間內(nèi)循環(huán)次數(shù)過多造成內(nèi)存溢出），循環(huán)條件為numberStart<imageData.data.length-1 結(jié)束，number為最終的點(diǎn)數(shù)量;numberStart為上次循環(huán)結(jié)束時(shí)點(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ù)圖片的寬和高計(jì)算出點(diǎn)的坐標(biāo)(x,y)，并且計(jì)算出該點(diǎn)上下左右四個(gè)點(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;
  }

判斷四個(gè)方向的透明度是否為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ì)對(duì)主循環(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怎么 計(jì)算圖片內(nèi)點(diǎn)個(gè)數(shù)的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

分享題目：使用JavaScript怎么計(jì)算圖片內(nèi)點(diǎn)個(gè)數(shù)
地址分享：http://www.rwnh.cn/article38/gjhhsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷推廣、移動(dòng)網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、定制網(wǎng)站、搜索引擎優(yōu)化、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)