web 网页按比例显示图片 js

原文链接：http://blog.csdn.net/liqinghuiyx/article/details/5442349

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

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

而第二个方法使用Javascript是将计算量转移到了客户端。

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

[javascript] view plaincopy

//将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才恢复正常。

添加一个批量操作的函数：

[javascript] view plaincopy

//将页面内所有指定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添加

[javascript] view plaincopy

<body οnlοad="javascript:init();">；在head区添加：
<mce:script language="javascript"><!--
function init()
{
RsizeAllImageById("imgProductItem", 150, 113);
}
// --></mce:script>

就可以将所有图片显示成缩略图了。

web 网页按比例显示图片 js相关推荐

python 如何使用 pandas 在 flask web 网页中分页显示 csv 文件数据
目录一.实战场景二.知识点 python 基础语法 python 文件读写 python 分页 pandas 数据处理 flask web 框架 jinja 模版三.菜鸟实战初始化 Flask ...
ViewPager按比例显示图片（显示下一张图片的一部分）
重写PageAdapter的方法: public float getPageWidth(int position) { if (position == 0 || position == 2) { re ...
android 图片百分比显示,Android编程实现等比例显示图片的方法
本文实例讲述了Android编程实现等比例显示图片的方法.分享给大家供大家参考,具体如下: 在android中,由于密度的影响,如果想得到图片的宽高是不行的,具体为什么我就大概说一下,具体的请搜索度娘 ...
html悬停显示图片,JS实现悬停单元格显示图片
2.1 准备模板 1)准备内置模板: %FR_HOME%\webroot\WEB-INF\reportlets\doc\Parameter\DynamicCol\函数实现动态列.cpt 打开模板,模板 ...
php网页分享时显示图片怎么设置,分享html页面在微信分享中可以设置分享标题和描述和图片...
微信中分享页面已经是很流行的一种方式,那么如何可以让自己做的h5页面能设置分享标题.描叙和图片呢? 问题第三方网站在微信中分享的链接想要左边有简介概述,右边有缩略图,没有缩略图不能引起客户足够的重视 ...
html加载完显示图片,js图片未加载完显示loading效果
js图片未加载完显示loading效果 img{float:left;200px;height:200px;margin:0 10px 10px 0} //判断浏览器 var Browser=new ...
java点击按钮隐藏图片6_原生JS实现隐藏显示图片 JS实现点击切换图片效果
今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求: 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片 ...
HTML在网页上不能显示图片问题
我遇到的问题是写了一个HTML程序,结果在网页上面不能显示,原因是图片路径放置错了. 修改前代码: <!DOCTYPE html> <html> <head> &l ...
使用网页对话框来显示图片 window.open()
这个主要用到了JS中的 window.open(url,windowname,location) url 目标窗口的url 如果url 是一个空字符串,浏览器将打开一个空白窗口 windowname ...

web 网页按比例显示图片 js

web 网页按比例显示图片 js相关推荐

最新文章

热门文章