用JavaScript自动生成等比例所略图
点击次数：24 次 发布日期：2008-11-26 22:11:34 作者：源代码网
|
<!-- 本示例演示图片加载时自动显示等比例缩略图,在做web程序的时候往往会遇到客户上传很大的图片,但是显示的时候如果把所略图的高宽比手工设置好,由于图片的形状不同会造成显示变形,这里用一段小脚本程序来解决这个问题,你可以把它修改一下做的更通用一些,比如说把Wa_SetImgAutoSize()函数加个img参数,然后在图片的onload=事件里传送自己去调用函数. --> <HTML> <HEAD> <TITLE>演示图片等比例缩小</TITLE> <script> function Wa_SetImgAutoSize() { var img=document.all.img1;//获取图片 var MaxWidth=200;//设置图片宽度界限 var MaxHeight=100;//设置图片高度界限 var HeightWidth=img.offsetHeight/img.offsetWidth;//设置高宽比 var WidthHeight=img.offsetWidth/img.offsetHeight;//设置宽高比 if(img.readyState!="complete")return false;//确保图片完全加载 if(img.offsetWidth>MaxWidth){ img.width=MaxWidth; img.height=MaxWidth*HeightWidth; } if(img.offsetHeight>MaxHeight){ img.height=MaxHeight; img.width=MaxHeight*WidthHeight; } } </script> </HEAD> <BODY> <img src="" border=0 id="img1" onload="Wa_SetImgAutoSize();"> <br> <input id=inp type="file" onpropertychange="img1.src=this.value;"> </BODY> </HTML> 源代码网供稿. |
