奥门威尼斯网址Javascript+CSS实现影像卷帘效果思路及代码_javascript技巧_脚本之家

用过Arcgis的筒子们对于Arcmap里面的一个卷帘效果肯定记忆很深刻,想把它搬到自己的WebGIS系统中去,抱着同样的想法,我也对这种比较炫的卷帘效果做了一下研究,吼吼,出来了,给大家汇报一下成果

复制代码 代码如下:

思路
HTML5的canvas提供了getImageData接口来获取canvas中的数据,所以我们能够先用drawImage接口将图片画在canvas上然后再通过getImageData得到图片数据矩阵。
需要注意,虽然IE9开始支持了canvas接口,但是其getImageData获取的数据并不是以标准的TypedArray方式存储的,或者说IE9没有提供对WebGL
Native binary
data的支持,所以如果需要对IE9支持,下面的矩阵需要用Array的方式保存。虽然IE9以下版本有开源项目explorercanvas提供canvas支持,但很可惜G_vmlCanvasManager并没有提供位图数据获取接口。TypedArray的相关内容可以参考HTML5的新数组基本矩阵
在图像处理中,矩阵计算是非常重要的内容,所以我们首先来建立一个矩阵模型。
通过getImageData接口获取的ImageData虽然具有类似矩阵的结构,但是他的结构是不可变的,不适合扩展,所以我们选择在Javascript中自建一个矩阵。
复制代码 代码如下: function Mat(__row,
__col, __data, __buffer){ this.row = __奥门威尼斯网址,row || 0; this.col =
__col || 0; this.channel = 4; this.buffer = __buffer || new
ArrayBuffer; this.data = new Uint8ClampedArray; __data &&
this.data.set; this.bytes = 1; this.type = “CV_RGBA”; } row –
代表矩阵的行数 col – 代表矩阵的列数 channel –
代表通道数量,因为通过getImageData获取的图片数据是以RGBA色彩空间进行描述的,即有Red和Alpha四个通道。
buffer – 数据所用的ArrayBuffer引用。 data –
图片的Uint8ClampedArray数组数据。 bytes –
每个数据单位占用字节,因为是uint8数据类型,所以占用字节数为1。 type –
数据类型是CV_RGBA。 图片数据转成矩阵的方法 复制代码 代码如下: function imread{ var width =
__image.width, height = __image.height; iResize; iCtx.drawImage; var
imageData = iCtx.getImageData, tempMat = new Mat(height, width,
imageData.data); imageData = null; iCtx.clearRect; return tempMat; }
注意:这里的__image指的是Image对象,不是字符串URL。因为浏览器中Image的读取是一个异步过程,并不能立刻返回相应的Mat对象,所以这个函数应当这样使用:
复制代码 代码如下: var img = new Image();
img.onload = function(){ var myMat = cv.imread; }; img.src = “1.jpg”;
iCtx和iResize方法是一个全局变量,允许给其它函数公用: 复制代码 代码如下: var iCanvas =
document.createElement, iCtx = iCanvas.getContext; function iResize{
iCanvas.width = __width; iCanvas.height = __height; }
我们来看一下drawImage方法: 用途 在canvas上绘制一个图片。 语法
context.drawImage; context.drawImage;
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); 例子
还有getImageData方法: 用途 获取canvas中的图像数据。
数据是以RGBA色彩空间返回的,即: R – 红色通道大小 G – 绿色通道大小 B –
蓝色通道大小 A – 不透明程度大小 语法 context.getImageData; 例子 复制代码 代码如下: red = imgData.data[0];
green = imgData.data[1]; blue = imgData.data[2]; alpha =
imgData.data[3]; 矩阵转成图像数据的方法
经过处理后的矩阵,需要一个方法变成ImageData,然后我们就可以通过putImageData方法,在canvas上绘制经过处理的图像了。
复制代码 代码如下: function
RGBA2ImageData{ var width = __imgMat.col, height = __imgMat.row,
imageData = iCtx.createImageData; imageData.data.set; return imageData;
} 我们来看一下putImageData方法: 用途
通过图像数据,在canvas上绘制图像。 语法
context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
将彩色图转换成灰度图
最后我们进行一个简单的色彩空间变换,将图像从RGBA转成GRAY。 复制代码 代码如下: function cvtColor{
if(__src.type && __src.type === “CV_RGBA”){ var row = __src.row,
col = __src.col; var dst = new Mat; data = dst.data, data2 =
__src.data; var pix1, pix2, pix = __src.row * __src.col * 4;
while { data[pix -= 4] = data[pix1 = pix + 1] = data[pix2 = pix +
2] = (data2[pix] * 299 + data2[pix1] * 587 + data2[pix2] *
114) / 1000; data[pix + 3] = data2[pix + 3]; } }else{ return src; }
return dst; } 参考OpenCV文档中的转换公式: RGBA to Gray: Y

看到这样的效果,你是不是小鸡动了一下,嘿嘿,别急,听我慢慢道来。

表格翻页

首先,容器。分别用两个DIV来显示两个不同时期的影像。接下来设置两个容器的样式,代码:

共 6 页 当前第 1 页 第一页)
上一页) 下一页)
最后一页) 转到第 1 2 3 4 5 6 页

#after{ position: absolute; top: 0px; left: 0px; background-image: url; width: 940px; height: 529px; background-repeat: no-repeat; } #before{ position: absolute; top: 0px; left: 0px; border-right: 3px solid #f00; background-image: url; width: 433px; height: 529px; background-repeat: no-repeat; max-width: 940px; } 
标题
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

这样,图片就在web上显示出来了。

接下来实现卷帘效果。实现卷帘,最主要的是设置before的宽度,如何去设置呢,就是获取鼠标的位置,代码如下:

function RollImage{ var x=evt.pageX; console.log.css; } /script>

这样,卷帘的效果就实现了。源代码如下:

.beforeafter{ width: 940px; height: 529px; } #after{ position: absolute; top: 0px; left: 0px; background-image: url; width: 940px; height: 529px; background-repeat: no-repeat; } #before{ position: absolute; top: 0px; left: 0px; border-right: 3px solid #f00; background-image: url; width: 433px; height: 529px; background-repeat: no-repeat; max-width: 940px; } 

 日本地震灾区前后对比    function RollImage{ <strong>var x=evt.pageX; $.css;</strong> }           

发表评论

电子邮件地址不会被公开。 必填项已用*标注