js 计算图片内点个数的示例代码

前言

图片是由连续的点信息组成，每个点信息包含四个长度即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格式，点的类型不限于圆形；该方法仅供参考。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。