JavaScript学习(三十一)——图像处理

我心飞翔 分类:javascript

图像是Web页面的一大组成部分,如果一个网页只存在文本、表格以及单一的颜色来表达是不够的。JavaScript提供了图像处理的功能。

Image对象

在网页中使用图片非常普遍,只需要在HTML文件中使用<img>标记,并将其中的src属性设置为希望显示图片的URL即可。

图片的属性表:

属性 说明
border 表示图片边界宽度,以像素为单位
height 表示图片的高度
hspace 表示图像与左边和右边的水平空间大小,以像素为单位
lowsrc 低分辨率显示候补图像的URL
name 图片的名称
src 图像URL
vsapce 表示上下边界垂直空间的大小
width 表示图片的宽度
alt 鼠标指针经过图片时显示的文字

因为Web页面中的所有<img>元素在document.images[ ]数组中都可以索引到,所以要在web页面中放置一幅图像, 可以使用该数组。

document.images[ ]是个数组,包含了所有页面中的图像对象,可以使用document.images[0]表示页面中第一个图像对象,document.images[1]表示页面中第二个图像对象,以此类推:也可以使用document.images[imageName]来获取图像对象,其中imageName 代表<img>标记内name特性定图像名称。

经常使用的图像对象属性与表中<img>标记的特性基本相同,含义也相同,唯一不同的是图像对象属性多了一个complete属性,用于判断图像是否完全被加载,如果图像完全被加载, 该属性返回true值。

图像对象的应用

图片的预装载

对于浏览器装载图像来说,只有在图像发送一个HTTP请求之后,才会被浏览器装载。当在网页中制作幻灯图像时,在服务器上获取图像可能要浪费很多时间,网页打开缓慢会严重影响到访问量,有一些浏览器采用一些措施来缓解这样的问题。例如,通过本地缓存存储图像,这种方式在图片第一次被调用时依然存在上述问题,这里我介绍一种图像预装载的方法来缓解图像装载缓慢的问题。
预装载是在HTTP请求图像之前将其下载到缓存的一种方式, 通过使用这一方式, 当页面需要图像时,图像可以立即从缓存中取出,从而将图像立即显示在页面上。
JavaScript 有一个内嵌Image类,使用该类可以进行图像的预装载。将图像的URL传递给该图像的src之后,浏览器将会进行装载请求。并将预装载的图像保存到本地缓存中,如果有图像请请求时,调用本地缓存内的图像,从而将图像立即显示,而不是重新装载。
例如,如下语法就是实例化一个图像对象, 进行图片的预装载。语法:

var preimg=new Image();
preimg.src="a.gif";
 

也可以将多个图像进行预装载,可以将这些图像放入数组中,然后使用循环将其放入缓存中。语法:

var test=['img1','img2','img3'];
var test2=[];
for(var i=0;i<test.length;i++){
    test2[i]=new Image();
    test2[i].src=test[i]+".gif";
}
 

例子:使用预装载图像制作幻灯效果 

本实例主要使用图像预装载原理将图像在页面中以幻灯的形式显示。当页面被初始化时,图像以幻灯的形式显示在页面中。

JavaScript学习(三十一)——图像处理JavaScript学习(三十一)——图像处理

JavaScript学习(三十一)——图像处理JavaScript学习(三十一)——图像处理

JavaScript学习(三十一)——图像处理

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var j=0;
			var test=new Array(5);  //定义一个数组
			for(var i=1;i<=5;i++){
				test[i]=i;
			}
			var test2=[];
			for(var i=0;i<test.length;i++){
				test2[i]=new Image();
				test2[i].src=test[i]+'.png';
			}
			function show(){
				if(j==5){
					j=1;
				}else{
					++j;
				}
				var imagestr=test2[j].src.split("/");
				var imagesrc=imagestr[imagestr.length-1];
				str="<img src='img/"+imagesrc+"'/>";
				div1.innerHTML=str;
			}
		</script>
	</head>
	<body onload="var begin=setInterval('show()',1000);">	
		<div id="div1" align="center"></div>	
	</body>
</html>
 

从上述代码中可以看出,笔者首先创建了一个数组test,用于存放图像的名称,再创建一个用于存放图像对象的数组test2,在循环中使用new Image()语句创建图像对象赋给test2 数组,将图像名称赋给每个图像对象的src特性,即指定每个图像的URL,这样就将多个图像预装载到cache中。由于图像对象的URL为绝对路径,所以这里需要对此URL字符串进行处理,使用split("/")函数将图像的绝对路径以“/”字符串进行分隔,将子字符串分别放入数组中,其中数组的最后一个值即为需要的图像名称,然后将图像放入<div>标记中。

为了使页面具有幻灯效果,需要使用setInterval()函数, 该函数是在一定时间内执行相同的 段代码,这里设置的时间是1000 毫秒(1000毫秒=1秒)。然后将该函数放置在<body>标记的onload事件中进行触发,当页面被初始化时,将间隔1000 毫秒调用一次show()函数。在show()函数中,设置变量j的初始值为0 (图像对象的第一个元素) ,然后进行递增操作,直到变量j为5 (图像对象的最后一个元素),它又会被重置为0,这样直循环下去。 最后实现了使用预装载图片制作幻灯的效果。

图片的随机显示

在网页中随机显示图片可以达到装饰和宣传的作用,如随机变化的网页背景和横幅广告图片等。使用随机显示图片的方式可以优化网站的整体效果。

为了实现图片的随机显示功能,可以使用Math对象的random()函数和floor()函数。

random()函数用于返回0-1之间的随机数,如果需要返回0到某个数字的随机数,只需要使用Math.random()乘以该数字即可。

例子:按时间变化的网页背景

本实例用于实现网页背景随机变化的功能。用户重复打开该网页可能会显示不同的页面背景,同时每隔一秒,图片随机变化一次。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户登录</title>
		<script type="text/javascript">
			function check(){
				var name=form1.user.value; //获取用户添加的用户名信息
				var pwd=form1.pwd.value;	//获取用户添加的密码信息
				if((name=="")||(name=null)){  //判断用户名是否为空
					alert("请输入用户名!");
					form1.user.focus();       //用户名文本框获取焦点
					return;
				}else if((pwd=="")||(pwd=null)){//判断密码是否为空
					alert("请输入密码!");
					form1.pwd.focus();         //密码文本框获取焦点
					return;
				}else{
					form1.submit();          //提交表单
				}
			}
			function random(){
				var i=Math.floor(Math.random()*5);
				var src="";
				switch(i){
					case 0:src="img/1.png";break;
					case 1:src="img/2.png";break;
					case 2:src="img/3.png";break;
					case 3:src="img/4.png";break;
					case 4:src="img/5.png";break;
				}
				document.body.background=src;
			//	setTimeout("random()",1000);
			}
		</script>
	</head>
	<body onload="setInterval('random()',1000);">
		
		<form name="form1" method="post" action="" >
			<table align="center" border="1" cellspacing="0" cellpadding="0" 
				bordercolor="#FFFFFF" bordercolordark="#CCCCCC" bordercolorlight="#FFFFFF">
				
				<tr>
					<td height="30" colspan="2" bgcolor="antiquewhite">用户登录</td>
				</tr>
				<tr>
					<td width="59" height="30">用户名:</td>
					<td width="162"><input name="user" type="text" class="user"></td>
				</tr>
				<tr>
					<td height="30">密 码</td>
					<td><input name="pwd" type="text" class="pwd"></td>
				</tr>
				<tr>
					<td height="30" colspan="2" align="center">
						<input name="button" type="button" class="btn_grey" value="登录" onclick="check()">
						&nbsp;
						<input name="Submit2" type="reset" class="btn_grey" value="重置">
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>
 

JavaScript学习(三十一)——图像处理

JavaScript学习(三十一)——图像处理

滤镜

滤镜是CSS样式的一种扩充,使用滤镜可以在图片或文本容器中实现阴影、模糊、水平、垂直、透明、波纹等特殊效果。

语法:filter:滤镜名称(参数)

<img src="***.jpg" width="" height="' style="filter:filpH()" >

滤镜的名称和参数具体可以参考CSS的API文档,就不一一详细打出来了。

总结

网页上视觉效果最好的部分就是图像,所以,掌握好图像处理技术在Web程序开发中是非常重要的,具体可以参考《JavaScript从入门到精通》(第二版)一书。

转载于掘金

回复

我来回复
  • 暂无回复内容