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α)。

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

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

获得变换矩阵函数实现

通常我们使用矩阵来表示仿射变换。

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

 或者

即:


代码如下:

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位形式,操作每个元素就等同于操作每一个像素。

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

效果

(0)

相关推荐

  • JS仿百度自动下拉框模糊匹配提示

    实际项目中,我们可以把数据获取改成ajax动态获取,在 getContent()中 <!DOCTYPE> <html> <head> <title>js/jQuery实现类似百度搜索功能</title> <meta name="Author" content="Michael"> <meta name="Keywords" content="js/jQuery

  • Javascript图像处理—图像形态学(膨胀与腐蚀)

    前言 上一篇文章,我们讲解了图像处理中的阈值函数,这一篇文章我们来做膨胀和腐蚀函数. 膨胀与腐蚀 说概念可能很难解释,我们来看图,首先是原图: 膨胀以后会变成这样: 腐蚀以后则会变成这样: 看起来可能有些莫名其妙,明明是膨胀,为什么字反而变细了,而明明是腐蚀,为什么字反而变粗了. 实际上,所谓膨胀应该指: 较亮色块膨胀. 而所谓腐蚀应该指: 较亮色块腐蚀. 上面图里面,由于背景白色是较亮色块,所以膨胀时就把黑色较暗色块的字压扁了--相反腐蚀时,字就吸水膨胀了-- 用数学公式表示就是: 说白了就是

  • JavaScript实现图像模糊化的方法实例

    前言 众所周知一幅完整的图像,是由红色.绿色.蓝色三个通道组成的.红色.绿色.蓝色三个通道的缩览图都是以灰度显示的.用不同的灰度色阶来表示" 红,绿,蓝"在图像中的比重.通道中的纯白,代表了该色光在此处为最高亮度,亮度级别是255. 模糊化方法: 就是将一个像素点的R(G,B)和它周围像素点的R(G,B)取出,然后取平均值再赋给这个像素点的R(G,B);这样就完成模糊化了: 例: 1        2        3 4        5        6 7        8   

  • js模糊查询实例分享

    首先要明白什么是模糊查询(废话又来了),就是根据关键字把列表中符合关键字的一项或某项罗列出来,也就是要检查列表的每一项中是否含有关键字,因此抽象一下就是一个字符串中是否含有某个字符或者字符串. 以下例子没有接触到后台数据的知识,只是查询当前表格中每一行所包含的关键字. 用到的方法为:string.indexOf(''); 找出字符串中某个字符的位置,而如果没有目标字符会返回-1. 实现代码: <meta charset="UTF-8"> <title></

  • Javascript实现图片加载从模糊到清晰显示的方法

    1.背景介绍 在网络相册应用中用户查看照片是最朴素的需求,当网络比较慢的时候查看照片等待的时间是比较长的,用户体验会很差. 2.现状 现在加载照片的方法主要有一下两种: (1)最原始的方式在html页面直接用img标签加载显示照片.该方法在网络速度比较慢或者要显示的照片比较大的时候会页面出现空白的等待过程,并且不能开始给用户看到照片大概的情况,用户体验比较不好 (2)在html页面先用img标签加载显示照片的缩略图,同时用javascript隐藏的加载照片的原图,等照片大图加载完成后再将原图显示

  • javascript正则表达式模糊匹配IP地址功能示例

    本文实例讲述了javascript正则表达式模糊匹配IP地址功能.分享给大家供大家参考,具体如下: function checkip() { var strIP = document.getElementById("accessip").value; var re = /^(\d{1,3}|\*)\.(\d{1,3}|\*)\.(\d{1,3}|\*)\.(\d{1,3}|\*)$/g //模糊匹配IP地址的正则表达式 if(re.test(strIP)){ if(RegExp.$1

  • JavaScript实现的图像模糊算法代码分享

    项目中需要用到HTML5模糊图像,以前用GDI,GDI+中都有现成的组件来实现,HTML5中如何实现?1.createImageData()2.getImageData()3.putImageData()以上3个函数即可实现,用法和奥义,自己百度吧,我就不重复叙述了,没多大的意义. 以下是实现模糊算法的JS,其实还有种2B级算法就是分布矩阵,这样效率提高很多倍,不过效果很差,羽化的效果不强.实现代码: 复制代码 代码如下: var mul_table = [        512,512,456

  • js图片模糊切换显示特效的方法

    本文实例讲述了js图片模糊切换显示特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>一款图片模糊切换显示效果</title> <body> <script language="JavaScript1.1"> <!-- var slidespeed=3000 var slideimages=new Array("/images/m01.jpg",&q

  • javascript入门·图片对象(无刷新变换图片)\滚动图像

    复制代码 代码如下: <%@LANGUAGE="JAVASCRIPT" CODEPAGE="936"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://

  • js对图片base64编码字符串进行解码并输出图像示例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

随机推荐