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 相关文章推荐
JavaScript实现禁止后退的方法
Dec 27 Javascript
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
实现JavaScript中继承的三种方式
Oct 16 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
js中将String转换为number以便比较
Jul 08 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
elementui的默认样式修改方法
Feb 23 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 Javascript
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 Javascript
原生JS封装vue Tab切换效果
Apr 28 Vue.js
使用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 mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
php类声明和php类使用方法示例分享
2014/03/29 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
javascript函数库-集合框架
2007/04/27 Javascript
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
基于vue实现分页效果
2017/11/06 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
eBay比利时购物网站:eBay.be
2019/08/09 全球购物
厂长岗位职责
2014/02/19 职场文书
巡警年度自我鉴定
2014/02/21 职场文书
王力宏牛津大学演讲稿
2014/05/22 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
学者《孟子》名人名言
2019/08/09 职场文书
导游词之杭州西湖
2019/09/19 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
python超详细实现完整学生成绩管理系统
2022/03/17 Python
拙作再改《我的收音机情缘》
2022/04/05 无线电
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers