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 相关文章推荐
用js计算页面执行时间的函数
Dec 07 Javascript
Javascript计算时间差的函数分享
Jul 04 Javascript
jQuery 开发者应该注意的9个错误
May 03 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
Sep 27 Javascript
JS中的phototype详解
Feb 04 Javascript
微信小程序 基础组件与导航组件详细介绍
Feb 21 Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
深究AngularJS中$sce的使用
Jun 12 Javascript
redux-saga 初识和使用
Mar 10 Javascript
Node.js使用Angular简单示例
May 11 Javascript
详解Vue底部导航栏组件
May 02 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来自动调用不同服务器上的flash
2006/10/09 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
禁止F5等快捷键的JS代码
2007/03/06 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
jquery访问ashx文件示例代码
2014/08/11 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
2016/09/04 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
webpack将js打包后的map文件详解
2018/02/22 Javascript
Nodejs处理异常操作示例
2018/12/25 NodeJs
NodeJS实现同步的方法
2019/03/02 NodeJs
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
python网络编程学习笔记(五):socket的一些补充
2014/06/09 Python
在Python的web框架中配置app的教程
2015/04/30 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
python集合是否可变总结
2019/06/20 Python
Python 脚本拉取 Docker 镜像问题
2019/11/10 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
营销与策划专业毕业生求职信
2013/11/01 职场文书
内勤主管岗位职责
2014/04/03 职场文书
合伙经营协议书范本
2014/04/18 职场文书
三年级学生评语
2014/04/23 职场文书
爱心捐助倡议书
2014/05/19 职场文书
中考标语大全
2014/06/05 职场文书
村级四风对照检查材料
2014/08/24 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
企业法人任命书
2015/09/21 职场文书
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技