当前位置:首页 > 编程教程 > javascript技术文章 > js 计算图片内点个数的示例代码

js 计算图片内点个数详解

  • 发布时间:
  • 作者:码农之家
  • 点击:83

这篇文章主要知识点是关于js、图片内点个数、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Head First JavaScript程序设计
  • 类型:JavaScript大小:71.2 MB格式:PDF作者:[美]埃里克·T.弗里曼
立即下载

Tags:JS 

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

前言

图片是由连续的点信息组成,每个点信息包含四个长度即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格式,点的类型不限于圆形;该方法仅供参考。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

javascript 相关电子书
学习笔记
网友NO.519425

js for终止循环 跳出多层循环

今天码农之家小编写带代码的时候遇到一段代码,需要终止运行for,通过遍历json数据实现判断 scriptvar Tid="55555";var jb51cp = [{id:66666,Cpurl:"https://baidu.com"},{id:55555,Cpurl:"https://www.jb51.net"}]; for(var i = 0; i jb51cp.length; i++){if(jb51cp[i].id==Tid){varthevalue=jb51cp[i].Cpurl;break;}}alert(thevalue);/script 通过上面的代码,完美解决了我的需求,但感觉性能不高,建议用switch函数,json方便批量输出,通过for判断会降低性能。注意查看break的地方。 示例代码 var a = [1,2,3,4,5,6,7,8]; // 8个数var b = [11,12,13,14,15,3,16,17]; //8个数testFor();console.log('555')function testFor() { for(var k=0;ka.length;k++){ console.log('444'); for(var i=0;ia.length;i++){ for(var j=0;jb.length;j++){ if( a[i]==b[j] ){ return false; } console.log('111'); } console.log('2222'); } console.log('333'); }}输出:// 1次444// 8次111// 1次222// 8次111// 1次222// 5次111// 1次555 可见 return 会直接跳出……

网友NO.504271

浅析Java线程Dump分析工具jstack解析及使用环境

jstack用于打印出给定的java进程ID或core file或远程调试服务的Java堆栈信息,如果是在64位机器上,需要指定选项-J-d64,Windows的jstack使用方式只支持以下的这种方式: jstack [-l][F] pid 如果java程序崩溃生成core文件,jstack工具可以用来获得core文件的java stack和native stack的信息,从而可以轻松地知道java程序是如何崩溃和在程序何处发生问题。另外,jstack工具还可以附属到正在运行的java程序中,看到当时运行的java程序的java stack和native stack的信息, 如果现在运行的java程序呈现hung的状态,jstack是非常有用的。进程处于hung死状态可以用-F强制打出stack。 dump 文件里,值得关注的线程状态有: 死锁,Deadlock(重点关注) 执行中,Runnable 等待资源,Waiting on condition(重点关注) 等待获取监视器,Waiting on monitor entry(重点关注) 暂停,Suspended 对象等待中,Object.wait() 或 TIMED_WAITI……

网友NO.877694

nodejs中简单实现Javascript Promise机制的实例

promise/deferred 是一个很好的处理异步调用编码的规范,下面以nodejs代码为类,来实现一个promise/A 规范的简单实现 复制代码 代码如下: /** * Created with JetBrains WebStorm. * User: xuwenmin * Date: 14-4-1 * Time: 上午9:54 * To change this template use File | Settings | File Templates. */ var EventEmitter = require('events').EventEmitter; var http = require('http'); var util = require('util'); // 定义promise对象 var Promise = function(){ // 实现继承事件类 EventEmitter.call(this); } // 继承事件通用方法 util.inherits(Promise, EventEmitter); // then 方法为promise/A 规范中的方法 Promise.prototype.then = function(successHandler, errorHandler, progressHandler){ if (typeof successHandler == 'function'){ this.once('success', successHandler); } if (typeof errorHandler === 'function'){ this.once('error', errorHandler); } if (typeof progressHandler === 'function'){ this.on('process', progressHandler); } return this; } // 定义延……

网友NO.184009

node.js中的fs.openSync方法使用说明

方法说明: 同步版的 fs.open() 。 语法: 复制代码 代码如下: fs.openSync(path, flags, [mode]) 由于该方法属于fs模块,使用前需要引入fs模块(var fs= require(“fs”) ) 接收参数: path 文件路径 flags 可以是以下的值 复制代码 代码如下: 'r' - 以读取模式打开文件。 'r+' - 以读写模式打开文件。 'rs' - 使用同步模式打开并读取文件。指示操作系统忽略本地文件系统缓存。 'rs+' - 以同步的方式打开,读取 并 写入文件。 'w' - 以读取模式打开文件,如果文件不存在则创建 'wx' - 和 ' w ' 模式一样,如果文件存在则返回失败 'w+' - 以读写模式打开文件,如果文件不存在则创建 'wx+' - 和 ' w+ ' 模式一样,如果文件存在则返回失败 'a' - 以追加模式打开文件,如果文件不存在则创建 'ax' - 和 ' a ' 模式一样,如果文件存在则返回失败 'a+' - 以读取追加模式打开文件,如果文件不存在则……

<
1
>

电子书 编程教程 PC软件下载 安卓软件下载

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757