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编程起步(第六课)
Jan 10 Javascript
javascript复制对象使用说明
Jun 28 Javascript
JS delegate与live浅析
Dec 21 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
基于ajax实现文件上传并显示进度条
Aug 03 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 Javascript
使用Vant完成Dialog弹框案例
Nov 11 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
兼容性比较好的PHP生成缩略图的代码
2011/01/12 PHP
php设计模式 Delegation(委托模式)
2011/06/26 PHP
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
2007/05/03 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
JavaScript实现关键字高亮功能
2014/11/12 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
jQuery限制图片大小的方法
2016/05/25 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
Node.js简单入门前传
2017/08/21 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
vue props 一次传多个值实例
2020/07/22 Javascript
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
调试Python程序代码的几种方法总结
2015/04/28 Python
wxPython定时器wx.Timer简单应用实例
2015/06/03 Python
浅谈pandas中shift和diff函数关系
2018/04/08 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
Django 自动生成api接口文档教程
2019/11/19 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
会计专业毕业生自我鉴定
2013/10/29 职场文书
如何写好自荐信
2014/04/07 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
报到证办理个人委托书
2014/10/06 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
龙门石窟导游词
2015/02/02 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
家长会主持词开场白
2015/05/29 职场文书
校园新闻稿范文
2015/07/18 职场文书
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript