Javascript图像处理—为矩阵添加常用方法
更新时间：2012年12月27日 09:32:25 作者：
上一篇文章，我们定义了矩阵，这篇文章我们来给矩阵添加一些常用方法比如：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 < 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]
上一篇文章，我们定义了矩阵，这篇文章我们来给矩阵添加一些常用方法。
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]
相关文章
极致之美——百行代码实现全新智能语言...2007-03-03
这篇文章主要为大家详细介绍了js实现鼠标切换图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
Javascript原型继承是一个被说烂掉了的话题，但是自己对于这个问题一直没有彻底理解，今天花了点时间又看了一遍《Javascript模式》中关于原型实现继承的几种方法，下面来一一说明下，在最后我根据自己的理解提出了一个关于继承比较完整的实现。2014-11-11
微信小程序movable view移动图片和双指缩放实例代码
movable-area是微信小程序的新组件，可以用来移动视图区域movable-view。这篇文章主要介绍了微信小程序movable view移动图片和双指缩放实例代码,需要的朋友可以参考下2017-08-08
TXT作为纯文本格式,只支持无格式的文本内容,不包括任何样式信息,下面这篇文章主要给大家介绍了关于纯前端导出txt文本文件的相关资料,文中给出了详细的代码示例,需要的朋友可以参考下2024-08-08
如果要操作一个元素，首先要获取到它，下面为大家介绍下document节点对象的获取方式，感兴趣的朋友不要错过2013-12-12
javascript html5 canvas实现可拖动省份的中国地图
这篇文章主要介绍了javascript html5 canvas实现可拖动省份的中国地图的相关资料,需要的朋友可以参考下2016-03-03
这篇文章主要为大家详细介绍了原生js实现放大镜效果，制作一个类似于淘宝的放大镜效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
js中的原型与原型链应该是老生常谈的话题了，在前端面试中基本都是必问的一个问题，但是很多人还是稀里糊涂的，只知道其表层含义。本文将带大家深入了解JavaScript中的原型与原型链，感兴趣的可以学习一下2022-10-10
这篇文章主要为大家详细介绍了js实现web留言板功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
最新评论