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 相关文章推荐
爆炸式的JS圆形浮动菜单特效代码
Mar 03 Javascript
在模板页面的js使用办法
Apr 01 Javascript
javascript最常用与实用的创建类的代码
Aug 12 Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 Javascript
javascript 对象数组根据对象object key的值排序
Mar 09 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
Mar 26 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 Javascript
通过vue刷新左侧菜单栏操作
Aug 06 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面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
PHP XML数据解析代码
2010/05/26 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
动态加载script文件的两种方法
2013/08/15 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
js实现跨域的方法实例详解
2015/06/24 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
Python实现子类调用父类的方法
2014/11/10 Python
在Django的session中使用User对象的方法
2015/07/23 Python
python在不同层级目录import模块的方法
2016/01/31 Python
python实现简单登陆流程的方法
2018/04/22 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
pandas数据拼接的实现示例
2020/04/16 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
我的大学生活演讲稿
2014/04/25 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
教师先进个人材料
2014/12/17 职场文书
纪检干部学习心得体会
2016/01/23 职场文书
创业计划书之便利店
2019/09/05 职场文书
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电
如何使用python包中的sched事件调度器
2022/04/30 Python