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 相关文章推荐
JS 继承实例分析
Nov 04 Javascript
javaScript 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
JavaScript面向对象编写购物车功能
Aug 19 Javascript
JavaScript基于对象去除数组重复项的方法
Oct 09 Javascript
vue模板语法-插值详解
Mar 06 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
解决vue.js this.$router.push无效的问题
Sep 03 Javascript
简单谈谈javascript高级特性
Sep 04 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
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
php实现图片缩略图的方法
2016/03/29 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
form自动提交实例讲解
2017/07/10 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
jQuery.Validate 使用笔记(jQuery Validation范例 )
2010/06/25 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
使用javascript插入样式
2016/03/14 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
JavaScript如何判断input数据类型
2020/02/06 Javascript
pygame学习笔记(5):游戏精灵
2015/04/15 Python
在Django的视图(View)外使用Session的方法
2015/07/23 Python
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
windows下搭建python scrapy爬虫框架步骤
2018/12/23 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
python属于软件吗
2020/06/18 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
美国在线家装零售商:Build.com
2016/09/02 全球购物
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
越南综合购物网站:Lazada越南
2019/06/10 全球购物
文秘档案管理岗位职责
2014/03/06 职场文书
入党思想汇报怎么写
2014/04/03 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
师德师风培训感言
2015/08/03 职场文书
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL