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 相关文章推荐
[HTML/CSS/Javascript]WWTJS
Sep 25 Javascript
jquery ajax提交表单数据的两种方式
Nov 24 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
Sep 16 Javascript
jquery下div 的resize事件示例代码
Mar 09 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 Javascript
vue cli 3.0 使用全过程解析
Jun 14 Javascript
layui的面包屑或者表单不显示的解决方法
Sep 05 Javascript
vue实现列表滚动的过渡动画
Jun 29 Javascript
Openlayers实现测量功能
Sep 25 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
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
PHP微信支付实例解析
2016/07/22 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
淘宝搜索框效果实现分析
2011/03/05 Javascript
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
vue实现局部刷新的实现示例
2019/04/16 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
js实现简单掷骰子小游戏
2019/10/24 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
python通过加号运算符操作列表的方法
2015/07/28 Python
Python实现Youku视频批量下载功能
2017/03/14 Python
Python实现的递归神经网络简单示例
2017/08/11 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
Python二维码生成识别实例详解
2019/07/16 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
python实现图片转字符画
2021/02/19 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
租房协议书样本
2014/08/20 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
委托函范文
2015/01/29 职场文书
环卫处个人工作总结
2015/03/04 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript