脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → jsvascript图像处理 图像金字塔

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

 更新时间：2013年01月15日 14:11:09   作者：  
上一篇文章，我们讲解了边缘梯度计算函数，这篇文章我们来了解图像金字塔;图像金字塔被广泛用于计算机视觉应用中;图像金字塔是一个图像集合，集合中所有的图像都源于同一个原始图像，而且是通过对原始图像连续降采样获得的
前言
上一篇文章，我们讲解了边缘梯度计算函数，这篇文章我们来了解图像金字塔。

图像金字塔？
图像金字塔被广泛用于计算机视觉应用中。
图像金字塔是一个图像集合，集合中所有的图像都源于同一个原始图像，而且是通过对原始图像连续降采样获得的。

常见的图像金字塔有下面两种：
•高斯金字塔(Gaussian pyramid): 用来向下采样
•拉普拉斯金字塔(Laplacian pyramid): 用来从金字塔低层图像重建上层未采样图像

高斯金字塔

Pyramid figure


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

那么如何获取下一层图像呢？
首先，和高斯内核卷积：
\frac{1}{16} \begin{bmatrix} 1 & 4 & 6 & 4 & 1 \\ 4 & 16 & 24 & 16 & 4 \\ 6 & 24 & 36 & 24 & 6 \\ 4 & 16 & 24 & 16 & 4 \\ 1 & 4 & 6 & 4 & 1 \end{bmatrix} 
然后，将所有偶数行列删掉。
可见，这样下一级图像约为上一级的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;
};

效果图

您可能感兴趣的文章:

相关文章

  • JavaScript原生对象之String对象的属性和方法详解

    JavaScript原生对象之String对象的属性和方法详解

    这篇文章主要介绍了JavaScript原生对象之String对象的属性和方法详解,本文讲解了length、charAt()、charCodeAt()、concat()、indexOf()、lastIndexOf()等方法属性,需要的朋友可以参考下
    2015-03-03
  • 浅谈async、defer以普通script加载的区别

    浅谈async、defer以普通script加载的区别

    本文主要介绍了浅谈async、defer以普通script加载的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • JavaScript实现下拉列表框数据增加、删除、上下排序的方法

    JavaScript实现下拉列表框数据增加、删除、上下排序的方法

    这篇文章主要介绍了JavaScript实现下拉列表框数据增加、删除、上下排序的方法,涉及javascript针对页面下拉列表框元素的添加、删除及移动的相关技巧,具有一定参考借鉴,需要的朋友可以参考下
    2015-08-08
  • webpack -v报错解决方案

    webpack -v报错解决方案

    这篇文章主要介绍了webpack -v报错解决方案,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • Webpack ECMAScript 模块详解

    Webpack ECMAScript 模块详解

    ECMAScript 模块（ESM）是在 Web 中使用模块的规范， 所有现代浏览器均支持此功能，同时也是在 Web 中编写模块化代码的推荐方式，这篇文章主要介绍了Webpack ECMAScript 模块,需要的朋友可以参考下
    2023-12-12
  • js实现拖拽效果

    js实现拖拽效果

    本文主要是为了让大家更好的理解js的面向对象，通过实现拖拽效果向大家展示js面向对象，非常不错，这里推荐给大家。
    2015-02-02
  • echarts饼图指示器文字颜色设置不同实例详解

    echarts饼图指示器文字颜色设置不同实例详解

    在默认的饼状图里面,图例legend颜色是黑色的,有时候根据ui需要,根据不同的背景色,需要将图例文字调成白色或者其他颜色,下面这篇文章主要给大家介绍了关于echarts饼图指示器文字颜色设置不同的相关资料,需要的朋友可以参考下
    2022-07-07
  • JS版微信6.0分享接口用法分析

    JS版微信6.0分享接口用法分析

    这篇文章主要介绍了JS版微信6.0分享接口用法,结合实例形式分析了JS版微信6.0分享功能原理、接口调用方法与相关使用注意事项,需要的朋友可以参考下
    2016-10-10
  • 详解JS中的this、apply、call、bind(经典面试题)

    详解JS中的this、apply、call、bind(经典面试题)

    JS中的this、apply、call、bind是一道经典面试题，最好还是了解一下 this 的指向和 call、apply、bind 三者的区别。下面就跟随脚本之家小编一起学习this、apply、call、bind的知识吧
    2017-09-09
  • 微信小程序实现复选框效果

    微信小程序实现复选框效果

    这篇文章主要为大家详细介绍了微信小程序实现复选框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-12-12

最新评论