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 相关文章推荐
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
js模仿hover的具体实现代码
Dec 30 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
JavaScript实现获取dom中class的方法
Feb 09 Javascript
javascript中call和apply的用法示例分析
Apr 02 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
angular和BootStrap3实现购物车功能
Jan 25 Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 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
支持oicq头像的留言簿(二)
2006/10/09 PHP
推荐php模板技术[转]
2007/01/04 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
PHP实现货币换算的方法
2014/11/29 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
PHP中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
WEB 前端开发中防治重复提交的实现方法
2016/10/26 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
Vue中this.$router.push参数获取方法
2018/02/27 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
ionic2.0双击返回键退出应用
2019/09/17 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
wxPython 入门教程
2008/10/07 Python
利用Python脚本实现ping百度和google的方法
2017/01/24 Python
Python之reload流程实例代码解析
2018/01/29 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
通过Python编写一个简单登录功能过程解析
2019/09/04 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
小学二年级评语
2014/04/21 职场文书
总经理岗位职责说明书
2014/07/30 职场文书
2014年消防工作总结
2014/11/21 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android