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的时间段实现代码
Aug 02 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
Oct 15 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
Javascript基础教程之函数对象和属性
Jan 18 Javascript
jQuery选择器querySelector的使用指南
Jan 23 Javascript
JavaScript解八皇后问题的方法总结
Jun 12 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
May 07 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
May 13 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
PHP写的加密函数,支持私人密钥(详细介绍)
2013/06/09 PHP
php中chdir()函数用法实例
2014/11/13 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
php读取本地json文件的实例
2018/03/07 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
Bootstrap列表组学习使用
2017/02/09 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
Python for循环中的陷阱详解
2018/07/13 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
Python 3.6 -win64环境安装PIL模块的教程
2019/06/20 Python
详解python中docx库的安装过程
2019/11/08 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
通过实例简单了解Python sys.argv[]使用方法
2020/08/04 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
html5读取本地文件示例代码
2014/04/22 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
感恩节活动方案
2014/01/27 职场文书
爱护草坪标语
2014/06/24 职场文书
预备党员群众路线教育实践活动思想汇报2014
2014/10/25 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
学生检讨书范文
2019/06/24 职场文书