快捷導航

js 控制圖片大小核心講解

更新時間：2013年10月09日 16:29:26 作者：

控制圖片大小的方法有很多，在本文將為大家詳細介紹下使用js實現(xiàn)縮放圖片，核心代碼如下，感興趣的朋友可以參考下

縮放圖片腳本分享

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title> New Document </title> 
<meta name="Generator" content="EditPlus"> 
<meta name="Author" content=""> 
<meta name="Keywords" content=""> 
<meta name="Description" content=""> 

<script> 

function AutoResizeImage(maxWidth,maxHeight){ 
var objImg = document.getElementById("operImg"); 
var img = new Image(); 
img.src = objImg.src; 
var hRatio; 
var wRatio; 
var Ratio = 1; 
var w = img.width; 
var h = img.height; 
wRatio = maxWidth / w; 
hRatio = maxHeight / h; 
if (maxWidth ==0 && maxHeight==0){ 
Ratio = 1; 
}else if (maxWidth==0){// 
if (hRatio<1) Ratio = hRatio; 
}else if (maxHeight==0){ 
if (wRatio<1) Ratio = wRatio; 
}else if (wRatio<1 || hRatio<1){ 
Ratio = (wRatio<=hRatio?wRatio:hRatio); 
} 
if (Ratio<1){ 
w = w * Ratio; 
h = h * Ratio; 
} 
objImg.height = h; 
objImg.width = w; 
} 
</script> 

</head> 

<body> 

<img src="1111.jpg" border="0" alt="534 X 800" id="operImg"/> 

<input type="button" value="縮放至寬100px，等比例壓縮" onclick="AutoResizeImage(100,0)"/> 

<input type="button" value="縮放至300px，等比例壓縮" onclick="AutoResizeImage(300,0)"/> 

<input type="button" value="原圖" onclick="AutoResizeImage(0,0)"/> 
</body> 
</html> 

重點js:

復制代碼代碼如下:

 
function AutoResizeImage(maxWidth,maxHeight){ 
var objImg = document.getElementById("operImg"); 
var img = new Image(); 
img.src = objImg.src; 
var hRatio; 
var wRatio; 
var Ratio = 1; 
var w = img.width; 
var h = img.height; 
wRatio = maxWidth / w; 
hRatio = maxHeight / h; 
if (maxWidth ==0 && maxHeight==0){ 
Ratio = 1; 
}else if (maxWidth==0){// 
if (hRatio<1) Ratio = hRatio; 
}else if (maxHeight==0){ 
if (wRatio<1) Ratio = wRatio; 
}else if (wRatio<1 || hRatio<1){ 
Ratio = (wRatio<=hRatio?wRatio:hRatio); 
} 
if (Ratio<1){ 
w = w * Ratio; 
h = h * Ratio; 
} 
objImg.height = h; 
objImg.width = w; 
} 

您可能感興趣的文章:

相關(guān)文章

JavaScript實現(xiàn)頁面跳轉(zhuǎn)的方式匯總
這篇文章主要介紹了JavaScript實現(xiàn)頁面跳轉(zhuǎn)的方式匯總的相關(guān)資料,需要的朋友可以參考下
2016-05-05
微信小程序頁面間傳遞數(shù)組對象方法解析
這篇文章主要介紹了微信小程序頁面間傳遞數(shù)組對象方法解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-11-11
JS 使用for循環(huán)遍歷子節(jié)點查找元素
這篇文章主要介紹了JS 使用for循環(huán)配合數(shù)組遍歷子節(jié)點查找元素，經(jīng)測試，效果不錯，需要的朋友可以看看
2014-09-09
javascript使用正則控制input輸入框允許輸入的值方法大全
在做項目的時候，我們經(jīng)常會遇到控制input輸入框允許輸入的值為數(shù)字，字母，漢字或者混排的情況，那么我們怎么來處理呢，下面我們就來探討怎么通過用javascript正則來實現(xiàn)
2014-06-06
JavaScript function函數(shù)種類詳解
這篇文章主要為大家詳細介紹了JavaScript function函數(shù)種類，包括普通函數(shù)、匿名函數(shù)、閉包函數(shù)，感興趣的小伙伴們可以參考一下
2016-02-02
詳談js遍歷集合(Array,Map,Set)
下面小編就為大家?guī)硪黄斦刯s遍歷集合(Array,Map,Set)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-04-04
js實現(xiàn)簡單秒表走動的時鐘特效
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單秒表走動的時鐘特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2015-08-08
JSON格式的鍵盤編碼對照表
這篇文章主要介紹了JSON格式的鍵盤編碼對照表,本文給出英文鍵名、對應數(shù)值和中文注釋,需要的朋友可以參考下
2015-01-01
用javascript實現(xiàn)簡單計算器
這篇文章主要為大家詳細介紹了用javascript實現(xiàn)簡單計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
javaScript實現(xiàn)滾動新聞的方法
這篇文章主要介紹了javaScript實現(xiàn)滾動新聞的方法,涉及javascript實現(xiàn)頁面滾動的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-07-07