javascript图像处理—仿射变换深度理解


Posted in Javascript onJanuary 16, 2013

前言

上一篇文章,我们讲解了图像金字塔,这篇文章我们来了解仿射变换。

仿射?

任何仿射变换都可以转换成,乘以一个矩阵(线性变化),再加上一个向量(平移变化)。

实际上仿射是两幅图片的变换关系。

例如我们可以通过仿射变换对图片进行:缩放、旋转、平移等操作。

一个数学问题

在解决仿射问题前,我们来做一个数学题。

javascript图像处理—仿射变换深度理解

如图,对于点(x1, y1),相对于原点旋转一个角度a,那么这个点到哪里了呢?

我们将坐标系变成极坐标系,则点(x1, y1)就变成了(r, β),而旋转后变成(r, α+ β)。

转回直角坐标系,则旋转后的点变成了(cos(α+ β) * r, sin(α+ β) * r)。

然后利用公式

cos(α+β)=cosαcosβ-sinαsinβ

sin(α+β)=sinαcosβ+cosαsinβ

以及原来点为(cosβ * r, sinβ * r),于是很容易得出新的点为(x1 * cosα - y1 * sinα, x1 * sinaα + y1 * cosα)。

我们可以从中推导出旋转变换公式

javascript图像处理—仿射变换深度理解

那么平移就相对简单很多了,就相当于加上一个向量(c, d)就行了。

获得变换矩阵函数实现

通常我们使用javascript图像处理—仿射变换深度理解矩阵来表示仿射变换。

javascript图像处理—仿射变换深度理解

其中A是旋转缩放变换,B是平移变换。则结果T满足:

javascript图像处理—仿射变换深度理解 或者 

javascript图像处理—仿射变换深度理解

即:javascript图像处理—仿射变换深度理解

var getRotationArray2D = function(__angle, __x, __y){ 
var sin = Math.sin(__angle) || 0, 
cos = Math.cos(__angle) || 1, 
x = __x || 0, 
y = __y || 0; return [cos, -sin, -x, 
sin, cos, -y 
]; 
};

这样我们就得到了一个仿射变换矩阵。

当然这个实现本身是有一定问题的,因为这个原点被固定在左上角了。

仿射变换实现

var warpAffine = function(__src, __rotArray, __dst){ 
(__src && __rotArray) || error(arguments.callee, IS_UNDEFINED_OR_NULL/* {line} */); 
if(__src.type && __src.type === "CV_RGBA"){ 
var height = __src.row, 
width = __src.col, 
dst = __dst || new Mat(height, width, CV_RGBA), 
sData = new Uint32Array(__src.buffer), 
dData = new Uint32Array(dst.buffer); var i, j, xs, ys, x, y, nowPix; 
for(j = 0, nowPix = 0; j < height; j++){ 
xs = __rotArray[1] * j + __rotArray[2]; 
ys = __rotArray[4] * j + __rotArray[5]; 
for(i = 0; i < width; i++, nowPix++, xs += __rotArray[0], ys += __rotArray[3]){ 
if(xs > 0 && ys > 0 && xs < width && ys < height){ 
y = ys | 0; 
x = xs | 0; 
dData[nowPix] = sData[y * width + x]; 
}else{ 
dData[nowPix] = 4278190080; //Black 
} 
} 
} 
}else{ 
error(arguments.callee, UNSPPORT_DATA_TYPE/* {line} */); 
} 
return dst; 
};

这个函数先把矩阵数据变成32位形式,操作每个元素就等同于操作每一个像素。

然后遍历所有元素,对对应的点进行赋值。

效果

 javascript图像处理—仿射变换深度理解

Javascript 相关文章推荐
获得所有表单值的JQuery实现代码[IE暂不支持]
May 24 Javascript
javascript数组输出的两种方式
Jan 13 Javascript
js+div实现文字滚动和图片切换效果代码
Aug 27 Javascript
java必学必会之static关键字
Dec 03 Javascript
javascript产生随机数方法汇总
Jan 25 Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
jQuery EasyUI开发技巧总结
Sep 26 jQuery
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
微信小程序静默登录的实现代码
Jan 08 Javascript
JavaScript实现音乐导航效果
Nov 19 Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 #Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 #Javascript
尝试在让script的type属性等于text/html
Jan 15 #Javascript
Js-$.extend扩展方法使方法参数更灵活
Jan 15 #Javascript
js弹出框轻量级插件jquery.boxy使用介绍
Jan 15 #Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
Jan 15 #Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 #Javascript
You might like
Syphon 使用方法
2021/03/03 冲泡冲煮
PHP VS ASP
2006/10/09 PHP
PHP无刷新上传文件实现代码
2011/09/19 PHP
Yii操作数据库的3种方法
2014/03/11 PHP
PHP中引用类型和值类型功能与用法示例
2019/02/26 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
JavaScript实现选中文字提示新浪微博分享效果
2017/06/15 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
[46:21]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
21行Python代码实现拼写检查器
2016/01/25 Python
Python3.6 Schedule模块定时任务(实例讲解)
2017/11/09 Python
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
Python多线程的退出控制实现
2020/08/10 Python
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
实习自我评价怎么写
2013/12/02 职场文书
评析教师个人的自我评价
2014/02/19 职场文书
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
小学生环保演讲稿
2014/04/25 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
地理科学专业自荐信
2014/09/01 职场文书
小学中等生评语
2014/12/29 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
世界红十字日活动总结
2015/02/10 职场文书
2015年中个人总结范文
2015/03/10 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书