js 控制图片大小
内容摘要
这篇文章主要为大家详细介绍了js 控制图片大小入门实例，具有一定的参考价值，可以用来参考一下
文章正文
这篇文章主要为大家详细介绍了js 控制图片大小入门实例，具有一定的参考价值，可以用来参考一下。
控制图片大小的方法有很多，在本文将为大家详细介绍下使用js实现缩放图片，对此感兴趣的朋友，看看idc笔记做的技术笔记。
经测试代码如下：
<script>
/**
* 控制图片大小
*
* @param
* @arrange （www.idcnote.com）
**/
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:
/**
* 控制图片大小
*
* @param
* @arrange （www.idcnote.com）
**/
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 控制图片大小入门实例的内容就先介绍到这里，更多相关文章的可以留意
代码注释
作者：喵哥笔记
