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 相关文章推荐
二行代码解决全部网页木马
Mar 28 Javascript
jQuery与ExtJS之选择实例分析
Aug 19 Javascript
Javascript开发之三数组对象实例介绍
Nov 12 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
javascript数组遍历for与for in区别详解
Dec 04 Javascript
javascript 兼容各个浏览器的事件
Feb 04 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
JS实现简单抖动效果
Jun 01 Javascript
使用vuepress搭建静态博客的示例代码
Feb 14 Javascript
vue实现菜单切换功能
May 08 Javascript
js事件触发操作实例分析
Jun 21 Javascript
Electron 调用命令行(cmd)
Sep 23 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面向对象编程快速入门
2006/10/09 PHP
简单示例AJAX结合PHP代码实现登录效果代码
2008/07/25 PHP
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
js选项卡的制作方法
2017/01/23 Javascript
js eval函数使用,js对象和字符串互转实例
2017/03/06 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
Python将字符串常量转化为变量方法总结
2019/03/17 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
幼儿园家长会邀请函
2014/01/15 职场文书
协议书范本
2014/04/23 职场文书
大学生求职信
2014/06/17 职场文书
管理岗位竞聘演讲稿
2014/08/18 职场文书
环境卫生倡议书
2014/08/29 职场文书
出差报告范文
2014/11/06 职场文书
幼儿园校车安全责任书
2015/05/08 职场文书
PyQt5 显示超清高分辨率图片的方法
2021/04/11 Python
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
HTML基本元素标签介绍
2022/02/28 HTML / CSS
Linux中各个目录的作用与内容
2022/06/28 Servers