源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-04-18 07:40 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:javascript图像处理—仿射变换深度理解
[b]前言[/b] [url=http://www.1sucai.cn/article/33274.htm]上一篇文章[/url],我们讲解了图像金字塔,这篇文章我们来了解仿射变换。 [b]仿射?[/b] 任何仿射变换都可以转换成,乘以一个矩阵(线性变化),再加上一个向量(平移变化)。 实际上仿射是两幅图片的变换关系。 例如我们可以通过仿射变换对图片进行:缩放、旋转、平移等操作。 [b]一个数学问题[/b] 在解决仿射问题前,我们来做一个数学题。 [img]http://files.jb51.net/file_images/article/201301/201301160852592.jpg[/img] 如图,对于点(x1, y1),相对于原点旋转一个角度a,那么这个点到哪里了呢? 我们将坐标系变成极坐标系,则点(x1, y1)就变成了(r, β),而旋转后变成(r, α+ β)。 转回直角坐标系,则旋转后的点变成了(cos(α+ β) * r, sin(α+ β) * r)。 [b]然后利用公式[/b]: cos(α+β)=cosαcosβ-sinαsinβ sin(α+β)=sinαcosβ+cosαsinβ 以及原来点为(cosβ * r, sinβ * r),于是很容易得出新的点为(x1 * cosα - y1 * sinα, x1 * sinaα + y1 * cosα)。 [b]我们可以从中推导出旋转变换公式[/b]: [img]http://files.jb51.net/file_images/article/201301/201301160852593.png[/img] 那么平移就相对简单很多了,就相当于加上一个向量(c, d)就行了。 [b]获得变换矩阵函数实现[/b] 通常我们使用[img]http://files.jb51.net/file_images/article/201301/201301160852594.png[/img] 矩阵来表示仿射变换。 [img]http://files.jb51.net/file_images/article/201301/201301160852595.png[/img] 其中A是旋转缩放变换,B是平移变换。则结果T满足: [img]http://files.jb51.net/file_images/article/201301/201301160852596.png[/img]  或者  [img]http://files.jb51.net/file_images/article/201301/201301160852597.png[/img] 即:[img]http://files.jb51.net/file_images/article/201301/201301160852598.png[/img]
[u]复制代码[/u] 代码如下:
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 ]; };
这样我们就得到了一个仿射变换矩阵。 当然这个实现本身是有一定问题的,因为这个原点被固定在左上角了。 [b]仿射变换实现 [/b]
[u]复制代码[/u] 代码如下:
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位形式,操作每个元素就等同于操作每一个像素。 然后遍历所有元素,对对应的点进行赋值。 [b]效果[/b]  [img]http://files.jb51.net/file_images/article/201301/201301160852599.jpg[/img]
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部