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 01 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
Jun 03 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
微信小程序之页面拦截器的示例代码
Sep 07 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 Javascript
基于JavaScript实现十五拼图代码实例
Apr 26 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
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
thinkphp中的url跳转用法分析
2016/07/12 PHP
php写app用的框架整理
2019/09/29 PHP
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
JavaScript获取table中某一列的值的方法
2014/05/06 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
javascript 通过键名获取键盘的keyCode方法
2017/12/31 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
python append、extend与insert的区别
2016/10/13 Python
python中json格式数据输出的简单实现方法
2016/10/31 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
解决Pycharm后台indexing导致不能run的问题
2019/06/27 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
如何理解python对象
2020/06/21 Python
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
一份全面的PHP面试问题考卷
2012/07/15 面试题
毕业自我评价
2014/02/05 职场文书
班级年度安全计划书
2014/05/01 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
经济管理自荐书
2014/06/09 职场文书
杜甫草堂导游词
2015/02/03 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis