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 树控件 比较好用
Jun 11 Javascript
页面载入结束自动调用js函数示例
Sep 23 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
js日期联动示例
May 02 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
详解Vue-Router源码分析路由实现原理
May 15 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 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
php 不同编码下的字符串长度区分
2009/09/26 PHP
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
php获取从百度、谷歌等搜索引擎进入网站关键词的方法
2015/07/08 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
PC端微信扫码支付成功之后自动跳转php版代码
2017/07/07 PHP
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
浅谈jquery.fn.extend与jquery.extend区别
2015/07/13 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
跟老齐学Python之类的细节
2014/10/13 Python
简单理解Python中基于生成器的状态机
2015/04/13 Python
Python基础中所出现的异常报错总结
2016/11/19 Python
python自动发微信监控报警
2019/09/06 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
Python要求O(n)复杂度求无序列表中第K的大元素实例
2020/04/02 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
书法培训心得体会
2014/01/05 职场文书
农村改厕实施方案
2014/03/22 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
企业党员岗位承诺书
2015/04/27 职场文书