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 相关文章推荐
Javascript 面向对象特性
Dec 28 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
May 15 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
Jun 30 Javascript
jquery悬浮提示框完整实例
Jan 13 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
vue项目打包部署_nginx代理访问方法详解
Sep 20 Javascript
Smartour 让网页导览变得更简单(推荐)
Jul 19 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 Javascript
vue+iview分页组件的封装
Nov 17 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
关于更改Zend Studio/Eclipse代码风格主题的介绍
2013/06/23 PHP
PHP目录操作实例总结
2016/09/27 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
浅谈 jQuery 事件源码定位问题
2014/06/18 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
Python实现数据可视化看如何监控你的爬虫状态【推荐】
2018/08/10 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
2019/08/05 HTML / CSS
怎么写好自荐信
2013/10/30 职场文书
旅游管理专业个人求职信范文
2013/12/24 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书