JS图片等比例缩放方法完整示例


Posted in Javascript onAugust 03, 2016

本文实例讲述了JS图片等比例缩放方法。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript自动按比例显示图片,按比例压缩图片显示</title>
<script type="text/javascript">
function AutoResizeImage(maxWidth,maxHeight,objImg){
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>
<br />
<img src="1.jpg"
   border="0"
 width="0"
 height="0"
 onload="AutoResizeImage(100,0,this)"
 />
width:100px
<br />
<br />
<img src="1.jpg"
   border="0"
 width="0"
 height="0"
 onload="AutoResizeImage(0,100,this)"
 />
height:100px
<br />
<br />
<img src="1.jpg"
   border="0"
 width="0"
 height="0"
 onload="AutoResizeImage(100,100,this)"
 />
width:100px height:100px
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
ext jquery 简单比较
Apr 07 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
Oct 10 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 Javascript
javascript 动态脚本添加的简单方法
Oct 11 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
vue脚手架vue-cli的学习使用教程
Jun 06 Javascript
D3.js实现简洁实用的动态仪表盘的示例
Apr 04 Javascript
Array数组对象中的forEach、map、filter及reduce详析
Aug 02 Javascript
微信小程序实现预览图片功能
Oct 22 Javascript
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
JS获取url参数、主域名的方法实例分析
Aug 03 #Javascript
JavaScript中的冒泡排序法
Aug 03 #Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
Aug 03 #Javascript
关于数据与后端进行交流匹配(点亮星星)
Aug 03 #Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 #Javascript
极力推荐10个短小实用的JavaScript代码段
Aug 03 #Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 #Javascript
You might like
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
ThinkPHP3.2.1图片验证码实现方法
2016/08/19 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
javascript天然的迭代器
2010/10/29 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
2012/05/11 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
python中精确输出JSON浮点数的方法
2014/04/18 Python
python使用生成器实现可迭代对象
2018/03/20 Python
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
百度软件工程师职位
2013/02/14 面试题
企业节能减排实施方案
2014/03/19 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
对PyTorch中inplace字段的全面理解
2021/05/22 Python