js 控制图片大小核心讲解

控制图片大小的方法有很多,在本文将为大家详细介绍下使用js实现缩放图片,核心代码如下,感兴趣的朋友可以参考下

缩放图片脚本分享 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html> 

<head> 

<title>js 控制图片大小-www.jbxue.com</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; 

} 

你可能感兴趣的:(js)