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 相关文章推荐
javascript 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
js模拟C#中List的简单实例
Mar 06 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
JS+CSS实现仿新浪微博搜索框的方法
Feb 24 Javascript
Angularjs的$http异步删除数据详解及实例
Jul 27 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
vuejs前后端数据交互之从后端请求数据的实例
Aug 11 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 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
解析strtr函数的效率问题
2013/06/26 PHP
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
php的dl函数用法实例
2014/11/06 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
vue 重塑数组之修改数组指定index的值操作
2020/08/09 Javascript
Python实现判断并移除列表指定位置元素的方法
2018/04/13 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
python多线程抽象编程模型详解
2019/03/20 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
python设置环境变量的作用整理
2020/02/17 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
python3让print输出不换行的方法
2020/08/24 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
英文求职信结束语大全
2013/10/26 职场文书
实习教师自我鉴定
2013/12/12 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
设置IIS Express并发数
2022/07/07 Servers