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


Posted in Javascript onApril 04, 2019

前言

图片是由连续的点信息组成,每个点信息包含四个长度即rgba信息,通过遍历配合处理函数实现对点个数的判断。

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

实现思路

本例子采用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格式,点的类型不限于圆形;该方法仅供参考。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery使用数组编写图片无缝向左滚动
Dec 11 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
JavaScript 学习笔记之语句
Jan 14 Javascript
javascript验证身份证号
Mar 03 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
基于javascript简单实现对身份证校验
Jan 25 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
vue实现个人信息查看和密码修改功能
May 06 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 Javascript
javascript解析json格式的数据方法详解
Aug 07 Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 Javascript
在node中使用jwt签发与验证token的方法
Apr 03 #Javascript
全面了解JavaScript的作用域链
Apr 03 #Javascript
从理论角度讨论JavaScript闭包
Apr 03 #Javascript
Node.js+Express+Mysql 实现增删改查
Apr 03 #Javascript
微信小程序配置服务器提示验证token失败的解决方法
Apr 03 #Javascript
js前端面试之同步与异步问题详解
Apr 03 #Javascript
详解JavaScript 为什么要有 Symbol 类型?
Apr 03 #Javascript
You might like
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
《DOTA3》开发工作已经开始 《DOTA3》将代替《DOTA2》
2021/03/06 DOTA
PHP开发中四种查询返回结果分析
2011/01/02 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
IIS 7.5 asp Session超时时间设置方法
2017/04/17 PHP
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
2007/01/09 Javascript
json简单介绍
2008/06/10 Javascript
JavaScript delete 属性的使用
2009/10/08 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
JavaScript中几种排序算法的简单实现
2015/07/29 Javascript
JavaScript中的return语句简单介绍
2015/12/07 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
微信小程序利用云函数获取手机号码
2019/12/17 Javascript
在Django的URLconf中使用多个视图前缀的方法
2015/07/18 Python
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
详解用python生成随机数的几种方法
2019/08/04 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
如何使用css3实现一个类在线直播的队列动画的示例代码
2020/06/17 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
.NET remoting中对象激活的两种方式
2015/06/08 面试题
物流专业大学的自我评价
2014/01/11 职场文书
毕业生自我鉴定实例
2014/01/21 职场文书
关于环保的建议书
2014/05/12 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
会计岗位工作总结
2015/08/12 职场文书
心理健康教育主题班会
2015/08/13 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
电频谱管理的原则是什么
2022/02/18 无线电
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript