使用JavaScript怎么 计算图片内点个数?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
1、能够嵌入动态文本于HTML页面。2、对浏览器事件做出响应。3、读写HTML元素。4、在数据被提交到服务器之前验证数据。5、检测访客的浏览器信息。6、控制cookies,包括创建和修改等。7、基于Node.js技术进行服务器端编程。
具体步骤
创建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,主循环继续,最后可得到数量。
看完上述内容,你们掌握使用JavaScript怎么 计算图片内点个数的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。