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 相关文章推荐
javascript 处理事件绑定的一些兼容写法
Dec 24 Javascript
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
iframe父页面获取子页面参数的方法
Feb 21 Javascript
JavaScript日期时间格式化函数分享
May 05 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 Javascript
js使用cookie实现记住用户名功能示例
Jun 13 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
JS前端监控采集用户行为的N种姿势
Jul 23 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函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
2018/03/14 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
详解Vue底部导航栏组件
2019/05/02 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
Python实现批量读取word中表格信息的方法
2015/07/30 Python
python表格存取的方法
2018/03/07 Python
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
MYSQL基础面试题
2012/05/13 面试题
高校师德师风自我剖析材料
2014/09/29 职场文书
学校感恩节活动策划方案
2014/10/06 职场文书
《爱的教育》读书心得
2014/11/08 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书
委托书范本格式
2019/04/18 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL