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 相关文章推荐
javascript instanceof 与typeof使用说明
Jan 11 Javascript
js弹窗代码 可以指定弹出间隔
Jul 03 Javascript
Javascript图像处理—亮度对比度应用案例
Jan 03 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 Javascript
基于jquery实现等比缩放图片
Dec 03 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 Javascript
Vue.js实现拖放效果的实例
Sep 30 Javascript
ES6学习教程之块级作用域详解
Oct 09 Javascript
vue脚手架及vue-router基本使用
Apr 09 Javascript
原生js实现滑块区间组件
Jan 20 Javascript
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基础知识:类与对象(5) static
2006/12/13 PHP
php 读取shell管道传输过来的内容
2010/03/01 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
提升你网站水平的jQuery插件集合推荐
2011/04/19 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
python 解析html之BeautifulSoup
2009/07/07 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
深入了解Django中间件及其方法
2019/07/26 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
大二自我鉴定范文
2013/10/05 职场文书
商场经理竞聘演讲稿
2014/01/01 职场文书
老同学聚会感言
2014/02/23 职场文书
学习全国两会精神心得体会范文
2014/03/17 职场文书
4s店活动策划方案
2014/08/25 职场文书
学生喝酒检讨书500字
2014/11/02 职场文书
论文答谢词
2015/01/20 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
技术入股协议书
2016/03/22 职场文书