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";
}
例子：使用预装载图像制作幻灯效果
本实例主要使用图像预装载原理将图像在页面中以幻灯的形式显示。当页面被初始化时，图像以幻灯的形式显示在页面中。
代码：
<!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()">
<input name="Submit2" type="reset" class="btn_grey" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
滤镜
滤镜是CSS样式的一种扩充，使用滤镜可以在图片或文本容器中实现阴影、模糊、水平、垂直、透明、波纹等特殊效果。
语法：filter：滤镜名称(参数)
<img src="***.jpg" width="" height="' style="filter:filpH()" >
滤镜的名称和参数具体可以参考CSS的API文档，就不一一详细打出来了。
总结
网页上视觉效果最好的部分就是图像，所以，掌握好图像处理技术在Web程序开发中是非常重要的，具体可以参考《JavaScript从入门到精通》(第二版)一书。
转载于掘金