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


Posted in Javascript onJanuary 15, 2013

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

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

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

高斯金字塔

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


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

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

首先,和高斯内核卷积:
jsvascript图像处理—(计算机视觉应用)图像金字塔 
然后,将所有偶数行列删掉。
可见,这样下一级图像约为上一级的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图像处理—(计算机视觉应用)图像金字塔

Javascript 相关文章推荐
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
如何使用Javascript获取距今n天前的日期
Jul 08 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
JavaScript的null和undefined区别示例介绍
Sep 15 Javascript
css如何让浮动元素水平居中
Aug 07 Javascript
Underscore源码分析
Dec 30 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
vue.js动态数据绑定学习笔记
May 19 Javascript
Node.js 使用命令行工具检查更新
Jun 08 Javascript
vue ssr 实现方式(学习笔记)
Jan 18 Javascript
使用Post提交时须将空格转换成加号的解释
Jan 14 #Javascript
javascript函数以及基础写法100多条实用整理
Jan 13 #Javascript
window.requestAnimationFrame是什么意思,怎么用
Jan 13 #Javascript
jquery获取div宽度的实现思路与代码
Jan 13 #Javascript
jQuery实现用方向键控制层的上下左右移动
Jan 13 #Javascript
js模仿html5 placeholder适应于不支持的浏览器
Jan 13 #Javascript
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 #Javascript
You might like
php类的扩展和继承用法实例
2015/06/20 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
Javascript Tab 导航插件 (23个)
2009/06/11 Javascript
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
详解C++编程中一元运算符的重载
2016/01/19 Python
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
Python中整数的缓存机制讲解
2019/02/16 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
医药营销个人求职信
2014/04/12 职场文书
党员创先争优活动总结
2014/05/04 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
Vue实现下拉加载更多
2021/05/09 Vue.js
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python
SSM VUE Axios详解
2021/10/05 Vue.js
《游戏王:大师决斗》新活动上线 若无符合卡组可免费租用
2022/04/13 其他游戏