javascript图像处理—仿射变换深度理解
更新时间：2013年01月16日 09:06:37 作者：
上一篇文章，我们讲解了图像金字塔，这篇文章我们来了解仿射变换,仿射？任何仿射变换都可以转换成，乘以一个矩阵（线性变化），再加上一个向量(平移变化),接下来详细介绍，感兴趣的朋友可以了解下
前言
![T = M \cdot [x, y, 1]^{T}](//img.jbzj.com/file_images/article/201301/201301160852597.png)
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位形式，操作每个元素就等同于操作每一个像素。
上一篇文章，我们讲解了图像金字塔，这篇文章我们来了解仿射变换。
仿射？
任何仿射变换都可以转换成，乘以一个矩阵（线性变化），再加上一个向量（平移变化）。
实际上仿射是两幅图片的变换关系。
例如我们可以通过仿射变换对图片进行：缩放、旋转、平移等操作。
一个数学问题
在解决仿射问题前，我们来做一个数学题。
如图，对于点(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α)。
我们可以从中推导出旋转变换公式：
那么平移就相对简单很多了，就相当于加上一个向量(c, d)就行了。
获得变换矩阵函数实现
通常我们使用
矩阵来表示仿射变换。
其中A是旋转缩放变换，B是平移变换。则结果T满足：
或者
![T = M \cdot [x, y, 1]^{T}](http://img.jbzj.com/file_images/article/201301/201301160852597.png)
即：
复制代码 代码如下:
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位形式，操作每个元素就等同于操作每一个像素。
然后遍历所有元素，对对应的点进行赋值。
效果
相关文章
这篇文章主要介绍了BootStrap select2 动态改变值的方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-02-02
这篇文章主要介绍了JS面向对象编程实现的Tab选项卡,结合具体案例形式详细分析了JS基于面向对象程序设计实现Tab选项卡的相关操作技巧,需要的朋友可以参考下2020-03-03
这篇文章主要介绍了JS经典正则表达式笔试题,结合实例形式汇总分析了javascript正则表达式的经典使用技巧,需要的朋友可以参考下2016-12-12
有时候我们需要限制用户的输入或者需要截取一定长度的字符串都需要用到这样的功能代码，这里脚本之家小编就为大家分享一下2017-09-09
这篇文章主要介绍了JS实现倒计时和文字滚动的效果,以实例的形式分析了倒计时与文字滚动效果的具体实现方法,并附有js时间变量的说明,非常具有实用价值,需要的朋友可以参考下2014-10-10
springMvc 前端用json的方式向后台传递对象数组方法
今天小编就为大家分享一篇springMvc 前端用json的方式向后台传递对象数组方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
本文给大家汇总了一下javascript的数组排序算法，包括冒泡排序、快速排序、插入排序、希尔排序，希望对大家熟悉javascript数组排序能够有所帮助。2015-07-07
这篇文章主要介绍了uni-app 支持多端第三方地图定位的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
一个简单但常用的javascript表格样式_鼠标划过行变色 简洁实现
经常性的会需要使用表格显示一些东西，当表格比较大的时候一眼望去脑袋可能会有些晕，经常性的因为没看准行而出现误操作，一般解决办法是交替行变行或者鼠标划过行变色2008-09-09
前端树形结构一般用于网页的地理位置输入框,地理位置级联选择,人员的部门选择等,这篇文章主要给大家介绍了关于JavaScript递归操作树形结构的相关资料,需要的朋友可以参考下2024-01-01
最新评论