web网页按比例显示图片实现原理及js代码


Posted in Javascript onAugust 09, 2013

在动态站点上经常需要上传自己的图片,而这些图片的大小是未知的,在显示成缩略图的时候必须进行按比例的缩放才能美观地显示。以最近做的golf网站(http://www.changligolfsales.com)做例子。

该网站需要上传高尔夫产品图片,并以缩略图显示在列表上,站点服务器支持Asp,但不支持aspjpeg之类的生成缩略图组件,所以将上传的图片直接显示成缩略图,就需要按比例缩放了,前提是要获取图片的长宽,第一个想到的方法是在上传的时候通过ADODB.STREAM对象读取图片的长宽信息保存在数据库并在页面生成的时候读取出来计算比例。这个方法明显的缺点是显示每张图片都要在服务器读取数据并计算,消耗资源多了也加上了页面打开时延。
而第二个方法使用Javascript是将计算量转移到了客户端。

原理是在页面载入完成后(onload触发)在客户端使用Javascript读取每张图片的大小并进行缩放。

//将imageDest图片的大小按比例缩放,适合显示在宽W和高H的区域内 
function ResizeImage(imageDest, W, H) 
{ 
//显示框宽度W,高度H 
var image = new Image(); 
image.src = imageDest.src; 
if(image.width>0 && image.height>0) 
{ 
//比较纵横比 
if(image.width/image.height >= W/H)//相对显示框:宽>高 
{ 
if(image.width > W) //宽度大于显示框宽度W,应压缩高度 
{ 
imageDest.width = W; 
imageDest.height = (image.height*W)/image.width; 
} 
else //宽度少于或等于显示框宽度W,图片完全显示 
{ 
imageDest.width = image.width; 
imageDest.height = image.height; 
} 
} 
else//同理 
{ 
if(image.height > H) 
{ 
imageDest.height = H; 
imageDest.width = (image.width*H)/image.height; 
} 
else 
{ 
imageDest.width = image.width; 
imageDest.height = image.height; 
} 
} 
} 
}

以上函数对图片进行缩放。
golf网站的每张缩略图的id都设为imgProductItem,如:<img src="<%= imgPath %>" name="imgProductItem" width="150" height="113" border="0" id="imgProductItem" />,里面的150x113就是显示框的最大尺寸,因为处理函数必须在onload完成时运行,所以这里必须设置一定的大小,要不整个页面在载入图片过程中出现排版错乱,到运行了RsizeAllImageById才恢复正常。
添加一个批量操作的函数:
//将页面内所有指定id的图片按比例缩放 
function RsizeAllImageById(id, W, H) 
{ 
var imgs = document.getElementsByTagName("img"); 
for(var i=0; i<imgs.length; i++) 
{ 
if(imgs[i].id == id) 
{ 
ResizeImage(imgs[i], W, H); 
} 
} 
}

这样在页面的body添加
<body onload="javascript:init();">;在head区添加: <mce:script language="javascript"><!-- 
function init() 
{ 
RsizeAllImageById("imgProductItem", 150, 113); 
} 
// --></mce:script>

就可以将所有图片显示成缩略图了。
Javascript 相关文章推荐
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
JS截取url中问号后面参数的值信息
Apr 29 Javascript
js函数调用的方式
May 06 Javascript
原生javascript实现隔行换色
Jan 04 Javascript
基于jquery实现表格无刷新分页
Jan 07 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
Nov 04 Javascript
JavaScript中浅讲ajax图文详解
Nov 11 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 Javascript
浅谈Angular4实现热加载开发旅程
Sep 08 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
May 27 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 Javascript
html向js方法传递参数具体实现
Aug 08 #Javascript
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 #Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 #Javascript
Jquery chosen动态设置值实例介绍
Aug 08 #Javascript
extjs两个tbar问题探讨
Aug 08 #Javascript
JS实现随机数生成算法示例代码
Aug 08 #Javascript
判断是否安装flash player及当前版本的JS代码
Aug 08 #Javascript
You might like
PHP调用三种数据库的方法(2)
2006/10/09 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
Laravel 队列使用的实现
2019/01/08 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
javascript奇异的arguments分析
2010/10/20 Javascript
Javascript window对象详解
2014/11/12 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
three.js中文文档学习之创建场景
2017/11/20 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
详解Python异常处理中的Finally else的功能
2017/12/29 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
详解使用django-mama-cas快速搭建CAS服务的实现
2019/10/30 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
综合办公室主任职责
2013/12/16 职场文书
小学亲子活动总结
2014/07/01 职场文书
支部书记四风对照材料
2014/08/28 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
古诗之感恩老师
2019/10/24 职场文书
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android
Redis命令处理过程源码解析
2022/02/12 Redis
MongoDB支持的索引类型
2022/04/11 MongoDB
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript