js 控制图片大小核心讲解

最新推荐文章于 2015-12-04 10:57:00 发布

aijiagui7454

最新推荐文章于 2015-12-04 10:57:00 发布

阅读量155

点赞数

原文链接：http://www.cnblogs.com/cfinder010/p/3360461.html

版权

控制图片大小的方法有很多，在本文将为大家详细介绍下使用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，等比例压缩" οnclick="AutoResizeImage(100,0)"/> 

<input type="button" value="缩放至300px，等比例压缩" οnclick="AutoResizeImage(300,0)"/> 

<input type="button" value="原图" οnclick="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; 
}

转载于:https://www.cnblogs.com/cfinder010/p/3360461.html

aijiagui7454

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 控制图片大小核心讲解

控制图片大小的方法有很多，在本文将为大家详细介绍下使用js实现缩放图片，核心代码如下，感兴趣的朋友可以参考下缩放图片脚本分享<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> ...
复制链接

扫一扫