JavaScript使用三种方式实现修改图象大小详解
需求分析：本网站采用新闻管理系统，首页新闻栏目中，需要从数据库中调用图片文件作为图片新闻中的图片，从而形成文字绕排形式。根据布局需要，图片的宽度不能超过200px。
要让图片能以适当大小显示的问题，实质是一个大图片等比例缩小的问题。如何通过图像的URL获得图像的大小（width,height）是问题的关键，假设k=Width/Height表示图像的比例值，当K>=1时，只要width不超过200px，则height一定<=200px；相反K<1，只要Height不超过150Px，width一定<=150px（正常情况下width：height=4：3）。所以只要K>=1限定width，K<1限定height就可以了。
方案一：使用javascript的Image()对象动态装载图片，获取图片的高度和宽度。
<scriptlanguage="JavaScript" type="text/javascript">
<!--varimgObj;function checkImg(theURL){var width,height;var k;imgObj =new Image();
//创建对象；
imgObj.src = theURL;
if (typeof(imgObj) =="object"){if ((imgObj.width != 0) && (imgObj.height != 0)){width=imgObj.width; //是否已取得了图像的宽度；
height=imgObj.height;
//是否已取得了图像的高度；
k=width/height;
//获取图像比例值；
if(k>=1){
if (width>=200){
width=200;
height=width/k;
}}
else
{if (height>=200){
height=200;
width=k?height;
}
}
showimg(theURL,width,height);
}
else
setTimeout("checkImg('" + theURL + "')", 100)
//通过Image对象动态装载图片，不可能立即得到图片的宽度和高度，所以每隔100毫秒重复调用检查。
}
}
functionshowimg(theURL,x,y){document.write("<imgsrc="+theURL+""+"width="+x+""+"height="+y+"border='0'"+""+"align='left'>");} //-->
</script>
<scriptlanguage="javascript">checkImg("Bt0085.jpg");
</script>
结果：将代码移植到首页文件（default.asp）中，然后通过服务器测试的时候就出现了问题。输入网址的时候，浏览器中先出现的是已经处理好后的图片，单击工具栏上的“后退”才出现了首页页面内容。再次测试，结果正常。每次更新图片的时候会出现同样的现象，或者每打开一台未访问过本网站的计算机也会出现同样问题。
原因分析：Image()对象的特性，主要用来实现图片翻滚效果，可以将图片提前下载到客户端，让图片之间的切换没有时间延迟。如下边的代码一样，使用 Image对象的 src 属性指定图片的路径 (URL)，这样就将 images 目录下的图片 pic2.gif 下载到客户端了。var myImg = newImage();myImg.src = "pic.gif";
这段代码将迫使浏览器开始从服务器下载指定的图片，如果客户端的缓存 (Cache)中有这个图片的话，浏览器会自动将其覆盖。那样，当用户将鼠标移动到图片上边的时候，图片将会立即变换，不会有时间的延迟。所以如果第一次显示图片后，第二次就能正常显示首页文件就是这个原因了。由此，我得出不能用Image()对象获取图像的属性这一结论，应该改变解决问题的方案。
方案二：使用<IMG>中的ID，定义图的宽度和高度
页面的<IMG>元素可以定义其显示范围，即图的高度Height和宽度（Width）。处理事件触发时，动态地改变图的两个属性就可达到效果。
<script>
functionshow()
{var w,h;
var k;
var con;
w=smallslot.width;
h=smallslot.height;
k=w/h;
if(k>=1){
if (w>=200){
w=200;
h=w/k;
}}
else
{if(h>=150){
h=150;
w=k?h;
}
}
return w;
}
</script>
<imgborder=0 ID="smallslot" src="4.jpg" onload="javascript:width=x;"align="left">
<script languge="javascript">
varx=show();
</script>
在这段代码中，将处理后的图像的width作为show()函数的返回值。在<IMG>中用onload事件调用图像的Width。
问题：首页上的图片新闻中图片没有显示，单击地址栏中的“转到”按钮，才能正常显示。实践告诉我又一次失败！因为上网者惟一习惯做的是输入网址、键入回车这两个动作。 在此基础上，笔者做了以下尝试： （1）<head>和</head>之间加入“<metahttp-equiv="refresh" content="10;url=default.asp">”。每隔10秒自动刷新屏幕，结果图片能正常显示，但不断刷屏让视觉很不舒服。 （2）window.location.reload()重新装载页面，可是结果是一直处于装载页面过程中，使网页不能正确显示。 （3）<IMGSRC=1.jpg border=0 onLoad="javascript:if(this.width>200) this.width=200;"align="left">，测试能够通过，但如果图像width<height，并且width>200px，则页面显示效果为高度超过150。这样如果没有K=width或者K=height的约束，页面效果是不合理的，因此不能采用。
方案三：将<IMG>中的Onload()事件放到<Bo-dy>中完成装载页面时事件的触发
仔细分析方案二，笔者发现主要原因是onload事件是页面载入时触发的事件。Onload在<Img>元素中使用，当IE解释到此处，需装载页面才能触发“javascript:width=x;”，因此要重新装载页面才能显示图片。另外，Onload()一般用在<Body>元素中，预先完成装载页面时触发的事件。所以，我将<IMG>中的Onload()事件放到了<Body>中去，代码如下：
<body onload="window.smallslot.width=show();">
<script>
function show()
{…..
//show()
}
</script>
<img border=0 ID="smallslot"src="1.jpg" align="left">
this is atest!
再次测试，通过了，而且首页调用成功！我成功了！ 经过这次经历，让笔者感受到了从事程序开发工作的艰辛和乐趣！有时为了一个小小的问题折腾得茶饭不思，但成功的喜悦又让人溢于言表。任何事情只要自己能刻苦钻研、持之以恒，相信问题总会得到解决的。
以上就是JavaScript使用三种方式实现修改图象大小详解的详细内容，更多请关注其它相关文章！