js 控制图片大小入门实例

人气：577 时间：2018-09-20

这篇文章主要为大家详细介绍了js 控制图片大小入门实例，具有一定的参考价值，可以用来参考一下。

控制图片大小的方法有很多，在本文将为大家详细介绍下使用js实现缩放图片，感兴趣的小伙伴，下面一起跟随四海网的小编罗X来看看吧。
经测试代码如下：


<script>
/**
 * 控制图片大小
 *
 * @param 
 * @arrange (512.笔记) www.q1010.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 (512.笔记) www.q1010.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; 
}

本文来自：http://www.q1010.com/174/577-0.html

注：关于js 控制图片大小入门实例的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：图片

您可能感兴趣的文章

上一篇：js push、join方法使用菜鸟教程

下一篇：CSS设置overflow:scroll 只能上下滚动示例