js 控制图片大小核心讲解


Posted in Javascript onOctober 09, 2013

缩放图片脚本分享

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title> New Document </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; 
}
Javascript 相关文章推荐
Javascript下的keyCode键码值表
Apr 10 Javascript
jQuery选择没有colspan属性的td的代码
Jul 06 Javascript
Ext对基本类型的扩展 ext,extjs,format
Dec 25 Javascript
原生js写的放大镜效果
Aug 22 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
Dec 27 Javascript
js数组循环遍历数组内所有元素的方法
Jan 18 Javascript
调整小数的格式保留小数点后两位
May 14 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 #Javascript
自己编写的类似JS的trim方法
Oct 09 #Javascript
jquery()函数的三种语法介绍
Oct 09 #Javascript
javascript禁用键盘功能键让右击及其他键无效
Oct 09 #Javascript
jquery右下角弹出提示框示例代码
Oct 08 #Javascript
让复选框只能选择一项的方法
Oct 08 #Javascript
js中的push和join方法使用介绍
Oct 08 #Javascript
You might like
Content-type 的说明
2006/10/09 PHP
PHP无刷新上传文件实现代码
2011/09/19 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
2017/02/16 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
简述vue中的config配置
2018/01/23 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
layui使用label标签的方法
2019/09/14 Javascript
python实现猜数字游戏
2020/03/25 Python
python重要函数eval多种用法解析
2020/01/14 Python
python离线安装外部依赖包的实现
2020/02/13 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
pycharm安装及如何导入numpy
2020/04/03 Python
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
法国体育用品商店:GO Sport
2019/10/23 全球购物
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
如何利用cmp命令比较文件
2016/04/11 面试题
毕业生在校学习的自我评价分享
2013/10/08 职场文书
教师求职信范文分享
2013/12/27 职场文书
体育活动总结
2015/02/04 职场文书
求职信范文怎么写
2015/03/19 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书
证券公司客户经理岗位职责
2015/04/09 职场文书
军训结束新闻稿
2015/07/17 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript