当前位置:  编程技术>WEB前端
本页文章导读:
    ▪Javascript图像处理——图像金字塔      前言上一篇文章,我们讲解了边缘梯度计算函数,这篇文章我们来了解图像金字塔。 图像金字塔?图像金字塔被广泛用于计算机视觉应用中。图像金字塔是一个图像集合,集合中所有的图.........
    ▪使用jQuery 完成ajax 文件下载      // Ajax 文件下载jQuery.download = function(url, data, method){ // 获取url和data if( url && data ){ // data 是 string 或者 array/object data = typeof data == 'string' ? data : jQuery.param(data); // 把参.........
    ▪Jquery真的不难~第一回 编程基础知识      回到目录前言   说Jquery之前,先来学习一下Javascript(以后简称为JS)语言中的基础知识问题,其时对于每种编程语言来说基础知识都是大同小异的,对变量,函数,条件语句块,循环语句.........

[1]Javascript图像处理——图像金字塔
    来源:    发布时间: 2013-11-06

前言

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

 

图像金字塔?

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

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

——《学习OpenCV》

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

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

 

高斯金字塔

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

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

首先,和高斯内核卷积:

  

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

可见,这样下一级图像约为上一级的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,
4, 16, 24, 16, 4,
6, 24, 36, 24, 6,
4, 16, 24, 16, 4,
1, 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,
4, 16, 24, 16, 4,
6, 24, 36, 24, 6,
4, 16, 24, 16, 4,
1, 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;
new
    
[2]使用jQuery 完成ajax 文件下载
    来源:    发布时间: 2013-11-06
// Ajax 文件下载
jQuery.download = function(url, data, method){
// 获取url和data
if( url && data ){
// data 是 string 或者 array/object
data = typeof data == 'string' ? data : jQuery.param(data);
// 把参数组装成 form的 input
var inputs = '';
jQuery.each(data.split('&'), function(){
var pair = this.split('=');
inputs+='<input type="hidden" name="'+ pair[0] +'" value="'+ pair[1] +'" />';
});
// request发送请求
jQuery('<form action="'+ url +'" method="'+ (method||'post') +'">'+inputs+'</form>')
.appendTo('body').submit().remove();
};
};

***也就是动态渲染表单,提交表单后再删除。***

调用实例

$.download('ExcelDownload.do','find=commoncode','post' );

本文链接


    
[3]Jquery真的不难~第一回 编程基础知识
    来源:    发布时间: 2013-11-06

回到目录

前言

   说Jquery之前,先来学习一下Javascript(以后简称为JS)语言中的基础知识问题,其时对于每种编程语言来说基础知识都是大同小异的,对变量,函数,条件语句块,循环语句块等等,而对于每种语言在写法上到是显得各有不同,如JS里在定义变量时,你要用var去声局部变量的声明,而对于弱类型的语言JS来说,你也可以不加var,但不加它会认为这个变量为全局变量,这是要注意的。

变量

在程序运行过程中,其值可以发生改变的(呵呵,10多年前书上的定义)

var people ; //声明一个名为people的变量
var people="good boy" ; //声明变量的同时为它赋值,浏览器自动解释它为字符型变量
var age=23; //声明一个局部变量,类型为整形
age=30 ; //声明一个全局变量,类型为整形,在程序执行过程中,它不会被释放

函数

为了实现一个功能,将一些代码块组织在一起,形成一个整体,我们叫它函数function,它可以大大减小代码的重复量,并使程序更清晰

// 标准写法
funciton helloFun(){
alert("hellow world")
}

// 变量形式的写法
var helloFun=function(){
alert("hellow world")
}

// 函数可以有参数,它异为弱类型
var helloFun=function(msg){
alert(msg);
}

// 函数的调用
helloFun("hello world");

条件语句

对于一件事,有多种结果,这时条件语句就出场了,如果条件固定几个值,可以用switch,否则使用if...else,看代码

// switch实例
var inputNumber=document.getElementByID("type");
switch(inputNumber)
{
case 1:
alert("类型1号");
break;
case 2:
alert("类型2号");
break;
case 3:
alert("类型3号");
break;
default:
alert("throw new Exception()");
break;
}

// if实例
var inputAge=document.getElementByID("age");
if(inputAge>1 && inputAge<18)
{
alert("未成年");
}
else if (inputAge>=18 && inputAge<70)
{
alert("成年人");
}
else if(inputAge>=70)
{
alert("老年人")
}
else
{
alert("填写表单有误");
}

循环语句

即在附和某个条件的时候,重复的执行某个代码块,我们可以使用while ,for等等

// for循环
var arr=[1,2,3]
for(int i=0;j=Arr.length;i<j;i++){
console.log(arr[i]); // 火狐的控制台可以看到结果
}

事实上,在JS世界,对于代码的执行性能也是很有讲究的,我们在for语句的写法性能不是错的,但如果写成下面的,性能会有所下降,因为它每次

遍历时,都会去求Arr的长度。

// for循环
var arr=[1,2,3]
for(int i=0;i<Arr.length;i++){
console.log(arr[i]); // 性能不好的
}

好了,对于JS编程基础知识就写到这里,从下回开始,将介绍jquery的相关知识了,感谢阅读!

 回到目录

本文链接


    
最新技术文章:
▪css white-space:nowrap属性用法(可以强制文字不...
▪IE里button设置border:none属性无效解决方法
▪border:none与border:0使用区别
▪html清除浮动的6种方法示例
▪三个不常见的 HTML5 实用新特性简介
linux iis7站长之家
▪低版本IE正常运行HTML5+CSS3网站的3种解决方案
▪CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chr...
▪ie6,ie7,ie8完美支持position:fixed的终极解决方案
▪小技巧处理div内容溢出
▪html小技巧之td,div标签里内容不换行
▪纯CSS实现鼠标放上去改变文字内容
▪li中插入img图片间有空隙的解决方案
▪CSS3中Transition属性详解以及示例分享
▪父div高度不能自适应子div高度的解决方案
▪告别AJAX实现无刷新提交表单
▪从零学CSS系列之文本属性
▪HTML 标签
▪CSS3+Js实现响应式导航条
▪CSS3实例分享之多重背景的实现(Multiple background...
▪用css截取字符的几种方法详解(css排版隐藏溢...
▪页面遮罩层,并且阻止页面body滚动。bootstrap...
▪CSS可以做的几个令你叹为观止的实例分享
▪详细分析css float 属性以及position:absolute 的区...
▪IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解...
▪CSS小例子(只显示下划线的文本框,像文字一...
▪可以给img元素设置背景图
▪不通过JavaScript实现的自动滚动视差效果
▪div+CSS 兼容小摘
▪CSS的inherit与auto使用分析
 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2021,,E-mail:www_#163.com(请将#改为@)

浙ICP备11055608号-3