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

前言

图片由连续的点信息组成，每个点信息包含四个长度，即rgba信息，通过遍历并配合处理功能可以判断点数。

实现理念

本例采用了png格式的图片，只需要判断这个点的透明度是否为0就可以判断它是否是球上的一个点。如果不是0，则判断该点在上下左右方向的透明度是否为0，如果不是0，则递归结果，并将该点的rgba信息设置为0；结束后，开始下一个主循环并计数，直到循环结束。

具体步骤

创建画布对象，加载目标图片，使用画布的drawImage方法将图片对象写入画布；参数为图片对象、地图起点横坐标、地图起点纵坐标、地图宽度、地图高度。

var canvas=document . create element(' canvas ')，var CTX=canvas . getcontext(' 2d ')；ctx.drawImage(imgObj，0，0，imgWidth，imgHeight)；获取图片相关信息的canvas的GetImageData方法，需要使用图片上各个点的rgba信息；参数为采点横坐标、纵坐标、宽度和高度。

var imageData=CTX . getimagedata(0，0，宽度，高度)；//重写imageData.data信息，实现点计数，遍历图片的点信息imageData.data。四个点的生长条件是i 4。当透明度不为0时，调用processing函数，终止循环(终止循环，防止短时间内循环过多导致内存溢出)。循环条件是numberstartimagedata。data.length-1，number是最终的点数。NumberStart是最后一个循环结束时的索引值，number是点的个数，judgeZero是处理函数。

函数repeateData(){ for(var I=number start；iimagedata . data . length；I=4){ number start=4；var a=imagedata . data[I ^ 3]；如果(a！=0) {法官(I，数字)；打破；} } if(numberstartimagedata . data . length-1){ repeateData()} else { console . log(number)；}}点处理功能，根据图片的宽度和高度计算点的坐标(x，y)，计算上下左右四个点的透明度信息。

函数法官(索引){ numberclearPoints(索引)；}函数clearPoints(index){ var x=(index/4)% width，y=math . floor(index/4/width)；var up=(x(y-1)*宽度)*4，down=(x(y-1)*宽度)*4，right=(x-1y *宽度)*4，left=(x-1y *宽度)* 4；var uA=imageData.data[up 3]，bA=imageData.data[down 3]，rA=imageData.data[right 3]，lA=imagedata . data[left 3]；}函数clearRgb(index){ imagedata . data[index]=0；imagedata . data[索引1]=0；imagedata . data[索引2]=0；imagedata . data[索引3]=0；}判断四个方向的透明度是否为0，如果为0，则继续调用，并擦除此信息。

if(uA！=0){ ClearGB(向上)；clearPoints(向上)；} if(bA！=0){ clearRgb(向下)；clearPoints(向下)；} if(rA！=0){ clearRgb(右)；clearPoints(右)；} if(lA！=0){ ClearGB(左)；clearPoints(左)；}将透明度不为0的所有点的信息设置为0，那么这个点就不会影响主循环的判断。

函数clearRgb(index){ imagedata . data[index]=0；imagedata . data[索引1]=0；imagedata . data[索引2]=0；imagedata . data[索引3]=0；}执行步骤4、5、6，直到点的所有rgba信息都设置为0，主循环继续，最终可以得到数量。

摘要

主要原理是获取球上的一个点，判断连续点，通过上、下、左、右递归消除点信息，到这个点的信息在imageData.data中已经完全擦除，这个过程记录为一个点，主循环继续；图片为png格式，点的类型不限于圆形。此方法仅供参考。

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