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 相关文章推荐
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
一文让你彻底搞清楚javascript中的require、import与export
Sep 24 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
Aug 04 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
Vue操作Storage本地化存储
Apr 29 Vue.js
在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
人大复印资料处理程序_查询篇
2006/10/09 PHP
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
19个Android常用工具类汇总
2014/12/30 PHP
phalcon框架使用指南
2016/02/23 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
jQuery 页面 Mask实现代码
2010/01/09 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
angular2使用简单介绍
2016/03/01 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
原生JS实现图片轮播效果
2016/12/26 Javascript
angularjs指令之绑定策略(@、=、&amp;)
2017/04/13 Javascript
Express之get,pos请求参数的获取
2017/05/02 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
python回调函数用法实例分析
2015/05/09 Python
CentOS 7 安装python3.7.1的方法及注意事项
2018/11/01 Python
python 读取二进制 显示图片案例
2020/04/24 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
越南综合购物网站:Lazada越南
2019/06/10 全球购物
南京某软件公司的.net面试题
2015/11/30 面试题
如何判断计算机可能已经中马
2013/03/22 面试题
实习自我鉴定模板
2013/09/28 职场文书
怎么写好自荐书
2014/03/02 职场文书
高三教师工作总结2015
2015/07/21 职场文书
校园广播稿范文
2015/08/19 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
js 数组 fill() 填充方法
2021/11/02 Javascript