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 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
jquery加载页面的方法(页面加载完成就执行)
Jun 21 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
Jun 29 Javascript
js和php如何获取当前url的内容
Sep 22 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 Javascript
浅谈javascript 函数属性和方法
Jan 21 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
Mar 25 Javascript
vue2组件之select2调用的示例代码
Oct 12 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
Jul 23 Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 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
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
javascript之更有效率的字符串替换
2008/08/02 Javascript
Dojo 学习要点
2010/09/03 Javascript
javascript hashtable 修正版 下载
2010/12/30 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
vue 注册组件的使用详解
2018/05/05 Javascript
jQuery提示框插件SweetAlert用法分析
2019/08/05 jQuery
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
Python实现抓取网页并且解析的实例
2014/09/20 Python
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
Python中的集合类型知识讲解
2015/08/19 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
python内置数据类型之列表操作
2018/11/12 Python
Python3操作MongoDB增册改查等方法详解
2020/02/10 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
html5 拖拽上传图片实例演示
2013/04/01 HTML / CSS
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
2015/08/31 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
车辆维修工自我评价怎么写
2013/09/20 职场文书
婚礼司仪主持词
2014/03/14 职场文书
继承权公证书
2014/04/09 职场文书
《夕阳真美》教学反思
2014/04/27 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
把77A收信机改造成收音机
2022/04/05 无线电