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 文件的同步加载与异步加载实现原理
Dec 13 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
EasyUI中的dataGrid的行内编辑
Jun 22 Javascript
Vue中的slot使用插槽分发内容的方法
Mar 01 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 20 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
微信小程序实现身份证取景框拍摄
Sep 09 Javascript
JavaScript中遍历的十种方法总结
Dec 15 Javascript
ajax jquery实现页面某一个div的刷新效果
Mar 04 jQuery
方便实用的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
开源SNS系统-ThinkSNS
2008/05/18 PHP
php session 检测和注销
2009/03/16 PHP
php环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
javascript模拟地球旋转效果代码实例
2013/12/02 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
Python生成器实现简单&quot;生产者消费者&quot;模型代码实例
2020/03/27 Python
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
Tostadora意大利:定制T恤
2019/04/08 全球购物
美国手机支架公司:PopSockets
2019/11/27 全球购物
总监职责范文
2013/11/09 职场文书
小加工厂管理制度
2014/01/21 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书
导游词之井冈山
2019/11/20 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL
JavaScript实现音乐播放器
2022/08/14 Javascript