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 相关文章推荐
js实现的网站首页随机公告随机公告
Mar 14 Javascript
JS的get和set使用示例
Feb 20 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
基于jquery实现即时检查格式是否正确的表单
May 06 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 Javascript
微信小程序实现折叠面板
Jan 31 Javascript
js+css实现打字效果
Jun 24 Javascript
layer插件select选中默认值的方法
Aug 14 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
vue实现日历备忘录功能
Sep 24 Javascript
小程序和web画三角形实现解析
Sep 02 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
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
Email+URL的判断和自动转换函数
2006/10/09 PHP
php中取得文件的后缀名?
2012/02/20 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
2013/06/28 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
解决layui动态加载复选框无法选中的问题
2019/09/20 Javascript
Python天气预报采集器实现代码(网页爬虫)
2012/10/07 Python
Python代理抓取并验证使用多线程实现
2013/05/03 Python
Python写的一个简单监控系统
2015/06/19 Python
Python实现SVN的目录周期性备份实例
2015/07/17 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
对python判断是否回文数的实例详解
2019/02/08 Python
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
django在开发中取消外键约束的实现
2020/05/20 Python
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
银行会计业务的个人自我评价
2013/11/02 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
2014年采购员工作总结
2014/11/18 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis