热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

Javascript图像处理—为矩阵添加常用方法

上一篇文章,我们定义了矩阵,这篇文章我们来给矩阵添加一些常用方法比如:toString方法、clone方法等,需要了解的朋友可以详细参考下
前言
上一篇文章,我们定义了矩阵,这篇文章我们来给矩阵添加一些常用方法。

toString方法
toString方法通常用作将对象转成字符串描述,所以我们将这一方法定义为输出矩阵元素。
代码如下:

Mat.prototype.toString = function(){
var tempData = this.data,
text = "Mat("+ this.type +") = {\n",
num = this.col * this.channel;
for(var i = 0; i text += "["
for(var j = 0; j text += (tempData[i * num + j] + ",");
}
text += "]\n";
}
text += "}";
return text;
};

这样,我们就可以通过:
代码如下:

console.log(mat);

来输出矩阵了。

clone方法
实际上,我们可以通过构造函数进行克隆操作,不过依然提供一个方法来方便记忆、使用。
代码如下:

Mat.prototype.clOne= function(){
return new Mat(this.row, this.col, this.data);
};

获取指定元素
我们有两种方法获取矩阵元素。

数组方法
由于实际上Mat是以数组形式保存数据的,而数据看起来是这样的:
R00 G00 B00 A00 R01 G01 B01 A01 …… R0n G0n B0n A0n
R10 G10 B10 A10 R11 G11 B11 A11 …… R1n G1n B1n A1n
……
Rm0 Gm0 Bm0 Am0 Rm1 Gm1 Bm1 Am1 …… Rmn Gmn Bmn Amn
其中大写R、G、B、A分别代表各通道的数值,而下标第一个表示行号,第二个表示列号。即第k行,第j列的G通道数值就是Gkj。
我们很容易得到对于一个Mat类型的mat来说,第k行,第j列像素的每个元素分别是:
Rkj = mat.data[(k * mat.col + j) * 4 + 0]
Gkj = mat.data[(k * mat.col + j) * 4 + 1]
Bkj = mat.data[(k * mat.col + j) * 4 + 2]
Akj = mat.data[(k * mat.col + j) * 4 + 3]

Buffer部分引用方法
通过Buffer的部分引用,我们可以得到矩阵的部分引用,比如我们可以利用这个来获取一个像素点的数据数组,而改变这个数组中的值,相应的矩阵数据也会改变;再比如我们可以以其他数据类型的方式读取数据。而这些对于普通Array是不能实现的。下面我们来看一下at方法的实现:
代码如下:

Mat.prototype.at = function(__type, __x, __y){
var type = __type,
x = __x || 0,
y = __y || 0,
rowLen = this.col * this.channel * this.bytes,
len = 1;
if(type.indexOf("Vec") > -1){
var temp = __type.match(/Vec(\d+)([a-z])/);
len = parseInt(temp[1]);
switch(temp[2]){
case "b":
type = "uchar";
break;
case "s":
type = "short";
break;
case "i":
type = "int";
break;
case "f":
type = "float";
break;
case "d":
type = "double";
break;
}
}
switch(type){
case "uchar":
return new Uint8Array(this.buffer, (y * rowLen + x), len);
break;
case "short":
return new Int16Array(this.buffer, (y * rowLen + x * 2), len);
break;
case "int":
return new Int32Array(this.buffer, (y * rowLen + x * 4), len);
break;
case "float":
return new Float32Array(this.buffer, (y * rowLen + x * 4), len);
break;
case "doulble":
return new Float64Array(this.buffer, (y * rowLen + x * 8), len);
break;
default:
console.error("不支持数据类型");
}
};

如果你对ArrayBuffer和TypedArray还不太清楚,可以参考:HTML5 中的新数组。
String type - 需要返回的数据类型。支持:
uchar 无符号8位整数
short 有符号16位整数
int 有符号32位整数
float 有符号32位浮点数
double 有符号64位浮点数

Vec 向量形式
向量形式字符串拼写是:Vec + (类型)+ (个数),例如Vecb4就是4个无符号8位整数,这是常见的得到一个像素点数据的方法,例如为了得到mat第j行,第k列的像素数据,可以使用:
代码如下:

mat.at("Vecb4", j, k);

int x - 要获取的元素在矩阵的行数。
int y - 要获取的元素在矩阵的列数。

getRow方法和getCol方法
类似于at的实现方法,我们可以很容易写出获取某一行或者某一列的方法:
代码如下:

Mat.prototype.getRow = function(__i){
var len = this.col * this.channel,
rowLen = len * this.bytes,
i = __i || 0;
return new this.data.constructor(this.buffer, i * rowLen, len);
};

代码如下:

Mat.prototype.getCol = function(__i){
var len = this.col * this.channel,
rowLen = len * this.bytes,
array = [],
i = __i || 0;
function getAllElement(__constructor){
var row = this.row,
channel = this.channel;
for(var j = 0; j array.push(new __constructor(this.buffer, j * rowLen + i, 1 * channel));
}
}
getAllElement(this.data.constructor);
return array;
};

rowRange和colRange方法
类似的,我们也可以得到指定行和指定列的方法:
代码如下:

Mat.prototype.rowRange = function(__i, __j){
var len = this.col * this.channel,
rowLen = len * this.bytes,
array = [],
i = __i || 0,
j = __j || this.row;
function getAllElement(__constructor){
var row = this.row;
for(var k = i; k <= j; k++){
array.push(new __constructor(this.buffer, k * rowLen, len));
}
}
getAllElement(this.data.constructor);
return array;
};

代码如下:

Mat.prototype.colRange = function(__i, __j){
var len = this.col * this.channel,
rowLen = len * this.bytes,
array = [],
i = __i || 0,
j = __j || this.col;
function getAllElement(__constructor){
var row = this.row
channel = this.channel;
for(var k = 0; k array.push(new __constructor(this.buffer, k * rowLen + __i, (__j - __i + 1) * channel));
}
}
getAllElement(Float64Array);
return array;
};

这四种方法返回的都是一种Array的数组。如果要获取这个数组rect第j行,第k列的元素,则可用:
rect[j][k]
推荐阅读
  • 使用Numpy实现无外部库依赖的双线性插值图像缩放
    本文介绍如何仅使用Numpy库,通过双线性插值方法实现图像的高效缩放,避免了对OpenCV等图像处理库的依赖。文中详细解释了算法原理,并提供了完整的代码示例。 ... [详细]
  • Docker的安全基准
    nsitionalENhttp:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd ... [详细]
  • 本文详细分析了JSP(JavaServer Pages)技术的主要优点和缺点,帮助开发者更好地理解其适用场景及潜在挑战。JSP作为一种服务器端技术,广泛应用于Web开发中。 ... [详细]
  • QBlog开源博客系统:Page_Load生命周期与参数传递优化(第四部分)
    本教程将深入探讨QBlog开源博客系统的Page_Load生命周期,并介绍一种简洁的参数传递重构方法。通过视频演示和详细讲解,帮助开发者更好地理解和应用这些技术。 ... [详细]
  • 深入理解 Oracle 存储函数:计算员工年收入
    本文介绍如何使用 Oracle 存储函数查询特定员工的年收入。我们将详细解释存储函数的创建过程,并提供完整的代码示例。 ... [详细]
  • PyCharm下载与安装指南
    本文详细介绍如何从官方渠道下载并安装PyCharm集成开发环境(IDE),涵盖Windows、macOS和Linux系统,同时提供详细的安装步骤及配置建议。 ... [详细]
  • 在 Windows 10 中,F1 至 F12 键默认设置为快捷功能键。本文将介绍几种有效方法来禁用这些快捷键,并恢复其标准功能键的作用。请注意,部分笔记本电脑的快捷键可能无法完全关闭。 ... [详细]
  • 本文总结了2018年的关键成就,包括职业变动、购车、考取驾照等重要事件,并分享了读书、工作、家庭和朋友方面的感悟。同时,展望2019年,制定了健康、软实力提升和技术学习的具体目标。 ... [详细]
  • 在计算机技术的学习道路上,51CTO学院以其专业性和专注度给我留下了深刻印象。从2012年接触计算机到2014年开始系统学习网络技术和安全领域,51CTO学院始终是我信赖的学习平台。 ... [详细]
  • 本周信息安全小组主要进行了CTF竞赛相关技能的学习,包括HTML和CSS的基础知识、逆向工程的初步探索以及整数溢出漏洞的学习。此外,还掌握了Linux命令行操作及互联网工作原理的基本概念。 ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • CSS 布局:液态三栏混合宽度布局
    本文介绍了如何使用 CSS 实现液态的三栏布局,其中各栏具有不同的宽度设置。通过调整容器和内容区域的属性,可以实现灵活且响应式的网页设计。 ... [详细]
  • 本文探讨了如何像程序员一样思考,强调了将复杂问题分解为更小模块的重要性,并讨论了如何通过妥善管理和复用已有代码来提高编程效率。 ... [详细]
  • 本文详细介绍了如何解决Uploadify插件在Internet Explorer(IE)9和10版本中遇到的点击失效及JQuery运行时错误问题。通过修改相关JavaScript代码,确保上传功能在不同浏览器环境中的一致性和稳定性。 ... [详细]
  • 本文介绍了如何利用JavaScript或jQuery来判断网页中的文本框是否处于焦点状态,以及如何检测鼠标是否悬停在指定的HTML元素上。 ... [详细]
author-avatar
DarkBaron_
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有