手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jsvascript图像处理—(计算机视觉应用)图像金字塔
jsvascript图像处理—(计算机视觉应用)图像金字塔
摘要:前言上一篇文章,我们讲解了边缘梯度计算函数,这篇文章我们来了解图像金字塔。图像金字塔?图像金字塔被广泛用于计算机视觉应用中。图像金字塔是一个...

前言

上一篇文章,我们讲解了边缘梯度计算函数,这篇文章我们来了解图像金字塔。

图像金字塔?

图像金字塔被广泛用于计算机视觉应用中。

图像金字塔是一个图像集合,集合中所有的图像都源于同一个原始图像,而且是通过对原始图像连续降采样获得的。

常见的图像金字塔有下面两种:

•高斯金字塔(Gaussian pyramid): 用来向下采样

•拉普拉斯金字塔(Laplacian pyramid): 用来从金字塔低层图像重建上层未采样图像

高斯金字塔

jsvascript图像处理—(计算机视觉应用)图像金字塔1

类似金字塔一样,高斯金字塔从底层原始图逐渐向下采样,越来越小。

那么如何获取下一层图像呢?

首先,和高斯内核卷积:

jsvascript图像处理—(计算机视觉应用)图像金字塔2

然后,将所有偶数行列删掉。

可见,这样下一级图像约为上一级的1/4。

那么向上变换如何变换呢?

首先先将图片行列扩大为原来的两倍,然后将添加的行列用0填充。

最后用刚刚的高斯内核乘以4后卷积。

高斯金字塔实现

复制代码 代码如下:

var pyrDown = function(__src, __dst){

__src || error(arguments.callee, IS_UNDEFINED_OR_NULL/* {line} */);

if(__src.type && __src.type == "CV_RGBA"){

var width = __src.col,

height = __src.row,

dWidth = ((width & 1) + width) / 2,

dHeight = ((height & 1) + height) / 2,

sData = __src.data,

dst = __dst || new Mat(dHeight, dWidth, CV_RGBA),

dstData = dst.data;

var withBorderMat = copyMakeBorder(__src, 2, 2, 0, 0),

mData = withBorderMat.data,

mWidth = withBorderMat.col;

var newValue, nowX, offsetY, offsetI, dOffsetI, i, j;

var kernel = [1, 4, 6, 4, 1,

, 16, 24, 16, 4,

, 24, 36, 24, 6,

, 16, 24, 16, 4,

, 4, 6, 4, 1

];

for(i = dHeight; i--;){

dOffsetI = i * dWidth;

for(j = dWidth; j--;){

for(c = 3; c--;){

newValue = 0;

for(y = 5; y--;){

offsetY = (y + i * 2) * mWidth * 4;

for(x = 5; x--;){

nowX = (x + j * 2) * 4 + c;

newValue += (mData[offsetY + nowX] * kernel[y * 5 + x]);

}

}

dstData[(j + dOffsetI) * 4 + c] = newValue / 256;

}

dstData[(j + dOffsetI) * 4 + 3] = mData[offsetY + 2 * mWidth * 4 + (j * 2 + 2) * 4 + 3];

}

}

}else{

error(arguments.callee, UNSPPORT_DATA_TYPE/* {line} */);

}

return dst;

};

dWidth = ((width & 1) + width) / 2,

dHeight = ((height & 1) + height) / 2

这里面a & 1等同于a % 2,即求除以2的余数。

我们实现时候没有按照上面的步骤,因为这样子效率就低了,而是直接创建一个原矩阵1/4的矩阵,然后卷积时候跳过那些要被删掉的行和列。

下面也一样,创建后卷积,由于一些地方一定是0,所以实际卷积过程中,内核有些元素是被忽略的。

复制代码 代码如下:

var pyrUp = function(__src, __dst){

__src || error(arguments.callee, IS_UNDEFINED_OR_NULL/* {line} */);

if(__src.type && __src.type == "CV_RGBA"){

var width = __src.col,

height = __src.row,

dWidth = width * 2,

dHeight = height * 2,

sData = __src.data,

dst = __dst || new Mat(dHeight, dWidth, CV_RGBA),

dstData = dst.data;

var withBorderMat = copyMakeBorder(__src, 2, 2, 0, 0),

mData = withBorderMat.data,

mWidth = withBorderMat.col;

var newValue, nowX, offsetY, offsetI, dOffsetI, i, j;

var kernel = [1, 4, 6, 4, 1,

, 16, 24, 16, 4,

, 24, 36, 24, 6,

, 16, 24, 16, 4,

, 4, 6, 4, 1

];

for(i = dHeight; i--;){

dOffsetI = i * dWidth;

for(j = dWidth; j--;){

for(c = 3; c--;){

newValue = 0;

for(y = 2 + (i & 1); y--;){

offsetY = (y + ((i + 1) >> 1)) * mWidth * 4;

for(x = 2 + (j & 1); x--;){

nowX = (x + ((j + 1) >> 1)) * 4 + c;

newValue += (mData[offsetY + nowX] * kernel[(y * 2 + (i & 1 ^ 1)) * 5 + (x * 2 + (j & 1 ^ 1))]);

}

}

dstData[(j + dOffsetI) * 4 + c] = newValue / 64;

}

dstData[(j + dOffsetI) * 4 + 3] = mData[offsetY + 2 * mWidth * 4 + (((j + 1) >> 1) + 2) * 4 + 3];

}

}

}else{

error(arguments.callee, UNSPPORT_DATA_TYPE/* {line} */);

}

return dst;

};

效果图

jsvascript图像处理—(计算机视觉应用)图像金字塔3

【jsvascript图像处理—(计算机视觉应用)图像金字塔】相关文章:

javascript中动态函数用法

javascript实现获取服务器时间

nodejs修复ipa处理过的png图片

javascript实现图片跟随鼠标移动效果的方法

JavaScript中继承用法实例分析

javascript删除元素节点removeChild()用法实例

Javascipt中处理字符串之big()方法的使用

javascript中this的四种用法

javaScript中with函数用法实例分析

Javascript调用XML制作连动下拉列表框

精品推荐
分类导航