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 相关文章推荐
学习YUI.Ext 第三天
Mar 10 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
May 17 Javascript
javascript定义变量时加var与不加var的区别
Dec 22 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
Feb 16 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
May 25 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
Sep 01 Javascript
通过bootstrap全面学习less
Nov 09 Javascript
React中jquery引用的实现方法
Sep 12 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
React key值的作用和使用详解
Aug 23 Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 Javascript
es6函数之尾递归用法实例分析
Apr 25 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 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
php实现三级级联下拉框
2016/04/17 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
php workerman定时任务的实现代码
2018/12/23 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
python实现异步回调机制代码分享
2014/01/10 Python
python实现文件快照加密保护的方法
2015/06/30 Python
python读取oracle函数返回值
2016/07/18 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
TensorFlow实现MLP多层感知机模型
2018/03/09 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
时尚设计师手表:The Watch Cabin
2018/10/06 全球购物
儿科护士实习自我鉴定
2013/10/17 职场文书
个人股份合作协议书
2014/10/24 职场文书
《角的度量》教学反思
2016/02/18 职场文书
考教师资格证不要错过的4个最佳时机
2019/07/17 职场文书
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python