js 控制图片大小核心讲解
2024-08-21 14:24:41
控制图片大小的方法有很多,在本文将为大家详细介绍下使用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;
}
最新文章
- failover机制的小讨论
- BestCoder Round #85(ZOJ1569尚未验证)
- Java泛型-内部原理: 类型擦除以及类型擦除带来的问题
- UVALive 4997 ABCD Tiles --DFS
- SSDB 数据库
- paper 97:异质人脸识别进展的资讯
- servlet 读取web.xml参数
- kerberos+ladp+hadoop-ha 安全认证部署配置
- MyEclipse 2013 开发WebService
- JMeter 连接数据库报错No suitable driver found for jdbc:xxxxxxxxx
- Linux SSH下安装Java并设置环境
- MyEclipse安装Eclipse Memory Analyzer插件以及使用例子
- .net好好地利用Conditional属性
- LVS负载均衡集群(DR)
- WebAPI集成SignalR
- Mysqldump 参数大全
- MariaDB 主从同步与热备(14)
- a 便签实现 下载
- js相关判断
- 在Android中使用Protocol Buffers(上篇)