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 相关文章推荐
Google Suggest ;-) 基于js的动态下拉菜单
Oct 11 Javascript
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
jQuery.clean使用方法及思路分析
Jan 07 Javascript
JQuery中serialize() 序列化
Mar 13 Javascript
JavaScript实现将xml转换成html table表格的方法
Apr 17 Javascript
移动手机APP手指滑动切换图片特效附源码下载
Nov 30 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
layui table设置前台过滤转义等方法
Aug 17 Javascript
微信小程序实现星星评分效果
Nov 01 Javascript
js正则匹配markdown里的图片标签的实现
Mar 24 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中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
php实现httpclient类示例
2014/04/08 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
非常全面的php日期时间运算汇总
2015/11/04 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
jQuery过滤选择器用法示例
2016/09/12 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
vue this.reload 方法 配置
2018/09/12 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
JS控制GIF图片的停止与显示
2019/10/24 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
Python的内存泄漏及gc模块的使用分析
2014/07/16 Python
Python实现随机生成有效手机号码及身份证功能示例
2017/06/05 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
np.random.seed() 的使用详解
2020/01/14 Python
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
马来西亚演唱会订票网站:StubHub马来西亚
2018/10/18 全球购物
应届大学毕业生找工作的求职信范文
2013/11/29 职场文书
大学生旅游业创业计划书
2014/01/29 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
股东合作协议书范本
2014/04/14 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
2015年学生管理工作总结
2015/05/26 职场文书