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


Posted in Javascript onDecember 27, 2012

前言
上一篇文章,我们定义了矩阵,这篇文章我们来给矩阵添加一些常用方法。

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 < this.row; i++){ 
text += "[" 
for(var j = 0; j < num; 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 < row; 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 < row; k++){ 
array.push(new __constructor(this.buffer, k * rowLen + __i, (__j - __i + 1) * channel)); 
} 
} 
getAllElement(Float64Array); 
return array; 
};

这四种方法返回的都是一种Array<TypedArray>的数组。如果要获取这个数组rect第j行,第k列的元素,则可用:
rect[j][k]
Javascript 相关文章推荐
jquery中load方法的用法及注意事项说明
Feb 22 Javascript
jQuery中:gt选择器用法实例
Dec 29 Javascript
JavaScript访问字符串中单个字符的两种方法
Jul 03 Javascript
基于jQuery实现仿51job城市选择功能实例代码
Mar 02 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
分享十三个最佳JavaScript数据网格库
Apr 07 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
node上的redis调用优化示例详解
Oct 30 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 Javascript
ie支持function.bind()方法实现代码
Dec 27 #Javascript
前后台交互过程中json格式如何解析以及如何生成
Dec 26 #Javascript
多个js与css文件的合并方法详细说明
Dec 26 #Javascript
JS打开图片另存为对话框实现代码
Dec 26 #Javascript
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 #Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
Dec 26 #Javascript
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 #Javascript
You might like
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
Node.js学习入门
2017/01/03 Javascript
select下拉框插件jquery.editable-select详解
2017/01/22 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
基于vue-draggable 实现三级拖动排序效果
2020/01/10 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
Python中模块string.py详解
2017/03/12 Python
python psutil库安装教程
2018/03/19 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
Python如何使用input函数获取输入
2020/08/06 Python
Python自动登录QQ的实现示例
2020/08/28 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
如何在存储过程中使用Loop
2016/01/05 面试题
车祸赔偿收入证明
2014/01/09 职场文书
学生会主席就职演讲稿
2014/01/14 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
出纳试用期自我评价
2015/03/10 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript