模板
教程
環境
性能
功能
管理
[蛙蛙推薦]用JS自動生成等比例縮略圖
發表于：2007-05-25來源：作者：點擊數：
標簽：
[原創]用JS自動生成等比例所略圖 !-- 本示例演示圖片加載時自動顯示等比例縮略圖,在做web程序的時候往往會遇到客戶上傳很大的圖片,但是顯示的時候如果把所略圖的高寬比手工設置好,由于圖片的形狀不同會造成顯示變形,這里用一段小腳本程序來解決這個問題,你可
[原創]用JS自動生成等比例所略圖<!--
本示例演示圖片加載時自動顯示等比例縮略圖,在做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 alt="[蛙蛙推薦]用JS自動生成等比例縮略圖" src=http://www.3pcode.com/article/article_111/ border=0 id="img1" onload="Wa_SetImgAutoSize();">
<br>
<input id=inp type="file" onpropertychange="img1.src=this.value;">
</BODY>
</HTML>
