如何获取设置图片大小以适应大小在页面上显示
日期：2010-06-27 浏览次数：21196 次
大家知道，丰富多彩的Web页面离不开图片的支持，图像一方面增加了网页的生动性，另一方面增加了网页规模，使下载速度减慢。如何让一图片能以适当大小在页面上显示，成了我一时解不开的谜。
前不久，我为单位开发了一个教学科研网站，采用新闻管理系统，首页上新闻栏目中，需要从数据库中调用图片文件作为图片新闻中的图片，从而形成文字绕排形式。由于整个系统包括新闻上传、新闻编辑、系统公告等都是动态实现的。在开发的过程中，我考虑到以下几个因素：（1）作为网站的维护者，对计算机的操作不太熟练；（2）网站讲究布局合理，内容充实。所以，出于设计的需要，网站页面中，图片新闻对图片的宽度、高度有一定的要求，本网站宽度不能超过200px,尽管我明白，我们可以使用Photoshop等图像处理软件，可以事先把图片处理好后，再上传到服务器中去，达到首页调用同样的效果，但作为用户，最希望的是操作越简单越好，因此我决心攻破这个问题。经过几天激战，我不断寻找解决问题的途径、不断测试直到成功。至此，我把自己的一些经验，写出来供广大从事脚本编写者参考，以此共勉。
要让图片能以适当大小显示的问题，实质是一个大图片等比例缩小的问题。当然，小图片是不能放大在网页中显示的，否则将出现图象失真现象。如何通过图象的URL获得图象的大小（width,height）是问题的关键，我便到网上去搜索能否用javascript编写图象等比例缩放，功夫不负有心人，终于找到《自适应图片大小的弹出窗口》一文，页面效果为，单击文本超链接后，页面弹出一个新窗口，显示图片，其中窗体大小与图片大小相当，文章中用javascript：Image()对象动态装载图片，获取图片的高度和宽度，再根据源图片的高度、宽度设置弹出窗口的高度与宽度设置弹出窗口的高度与宽度，并打开该窗口，主要代码如下：
测试一：
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=gb2312>
<meta name=GENERATOR content=Microsoft FrontPage 4.0>
<meta name=ProgId content=FrontPage.Editor.Document>
<title>test</title>
</head>
<body>
<script language=javascript type=text/javascript>
<!--
var imgObj;
function checkImg(theURL,winName){
// 对象是否已创建
if (typeof(imgObj) == object){
// 是否已取得了图像的高度和宽度
if ((imgObj.width != 0) && (imgObj.height != 0))
// 根据取得的图像高度和宽度设置弹出窗口的高度与宽度，并打开该窗口
// 其中的增量 20 和 30 是设置的窗口边框与图片间的间隔量
OpenFullSizeWindow(theURL,winName, ,width= + (imgObj.width+20) + ,height= + (imgObj.height+30));
else
// 因为通过 Image 对象动态装载图片，不可能立即得到图片的宽度和高度，所以每隔100毫秒重复调用检查
setTimeout(checkImg(' + theURL + ',' + winName + '), 100)
}
}
function OpenFullSizeWindow(theURL,winName,features) {
var aNewWin, sBaseCmd;
// 弹出窗口外观参数
sBaseCmd = toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,;
// 调用是否来自 checkImg
if (features == null || features == ){
// 创建图像对象
imgObj = new Image();
// 设置图像源
imgObj.src = theURL;
// 开始获取图像大小
checkImg(theURL, winName)
}
else{
// 打开窗口
aNewWin = window.open(theURL,winName, sBaseCmd + features);
// 聚焦窗口
aNewWin.focus();
}
}
//-->
</script>
<a href=http://www.webjx.com/htmldata/2005-11-19/Bt0085.jpg onClick=OpenFullSizeWindow(this.href,'','');return false>图片测试</a>
</body>
</html>
有了Image()对象来获取图象的Width、Height，我就知道该如何去解决怎样实现图象的等比例缩放问题了。于是，我用k=Width/Height表示图象的比例值，当 K>=1时，表示width>heght，只要width不超过200px，则height一定<=200px；相反K<1，只要Height不超过150Px，width一定<=150px（正常情况下width/height=4：3）。所以只要K>=1限定width，K<1限定height就可以了。在测试一的帮助下，我很快有了下面的一段代码（测试二）：
测试二
<script language=javascript type=text/javascript>
<!--
var imgObj;
function checkImg(theURL){
var width,height;
var k;
imgObj = new Image();
imgObj.src = theURL;
if (typeof(imgObj) == object){
if ((imgObj.width != 0) && (imgObj.height != 0))
{width=imgObj.width;
height=imgObj.height;
k=width/height;
document.write (k);
if(k>=1){
if (width>=200){
width=200;
height=width/k;
}}
else
{if (height>=200){
height=200;
width=k*height;
}
}
showimg(theURL,width,height);
}
else
setTimeout(checkImg(' + theURL + '), 100)
}
}
function showimg(theURL,x,y)
{
document.write(<imgsrc=+theURL++width=+x++height=+y+border='0'+ +align='left'>);
}
//-->
&
前不久，我为单位开发了一个教学科研网站，采用新闻管理系统，首页上新闻栏目中，需要从数据库中调用图片文件作为图片新闻中的图片，从而形成文字绕排形式。由于整个系统包括新闻上传、新闻编辑、系统公告等都是动态实现的。在开发的过程中，我考虑到以下几个因素：（1）作为网站的维护者，对计算机的操作不太熟练；（2）网站讲究布局合理，内容充实。所以，出于设计的需要，网站页面中，图片新闻对图片的宽度、高度有一定的要求，本网站宽度不能超过200px,尽管我明白，我们可以使用Photoshop等图像处理软件，可以事先把图片处理好后，再上传到服务器中去，达到首页调用同样的效果，但作为用户，最希望的是操作越简单越好，因此我决心攻破这个问题。经过几天激战，我不断寻找解决问题的途径、不断测试直到成功。至此，我把自己的一些经验，写出来供广大从事脚本编写者参考，以此共勉。
要让图片能以适当大小显示的问题，实质是一个大图片等比例缩小的问题。当然，小图片是不能放大在网页中显示的，否则将出现图象失真现象。如何通过图象的URL获得图象的大小（width,height）是问题的关键，我便到网上去搜索能否用javascript编写图象等比例缩放，功夫不负有心人，终于找到《自适应图片大小的弹出窗口》一文，页面效果为，单击文本超链接后，页面弹出一个新窗口，显示图片，其中窗体大小与图片大小相当，文章中用javascript：Image()对象动态装载图片，获取图片的高度和宽度，再根据源图片的高度、宽度设置弹出窗口的高度与宽度设置弹出窗口的高度与宽度，并打开该窗口，主要代码如下：
测试一：
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=gb2312>
<meta name=GENERATOR content=Microsoft FrontPage 4.0>
<meta name=ProgId content=FrontPage.Editor.Document>
<title>test</title>
</head>
<body>
<script language=javascript type=text/javascript>
<!--
var imgObj;
function checkImg(theURL,winName){
// 对象是否已创建
if (typeof(imgObj) == object){
// 是否已取得了图像的高度和宽度
if ((imgObj.width != 0) && (imgObj.height != 0))
// 根据取得的图像高度和宽度设置弹出窗口的高度与宽度，并打开该窗口
// 其中的增量 20 和 30 是设置的窗口边框与图片间的间隔量
OpenFullSizeWindow(theURL,winName, ,width= + (imgObj.width+20) + ,height= + (imgObj.height+30));
else
// 因为通过 Image 对象动态装载图片，不可能立即得到图片的宽度和高度，所以每隔100毫秒重复调用检查
setTimeout(checkImg(' + theURL + ',' + winName + '), 100)
}
}
function OpenFullSizeWindow(theURL,winName,features) {
var aNewWin, sBaseCmd;
// 弹出窗口外观参数
sBaseCmd = toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,;
// 调用是否来自 checkImg
if (features == null || features == ){
// 创建图像对象
imgObj = new Image();
// 设置图像源
imgObj.src = theURL;
// 开始获取图像大小
checkImg(theURL, winName)
}
else{
// 打开窗口
aNewWin = window.open(theURL,winName, sBaseCmd + features);
// 聚焦窗口
aNewWin.focus();
}
}
//-->
</script>
<a href=http://www.webjx.com/htmldata/2005-11-19/Bt0085.jpg onClick=OpenFullSizeWindow(this.href,'','');return false>图片测试</a>
</body>
</html>
有了Image()对象来获取图象的Width、Height，我就知道该如何去解决怎样实现图象的等比例缩放问题了。于是，我用k=Width/Height表示图象的比例值，当 K>=1时，表示width>heght，只要width不超过200px，则height一定<=200px；相反K<1，只要Height不超过150Px，width一定<=150px（正常情况下width/height=4：3）。所以只要K>=1限定width，K<1限定height就可以了。在测试一的帮助下，我很快有了下面的一段代码（测试二）：
测试二
<script language=javascript type=text/javascript>
<!--
var imgObj;
function checkImg(theURL){
var width,height;
var k;
imgObj = new Image();
imgObj.src = theURL;
if (typeof(imgObj) == object){
if ((imgObj.width != 0) && (imgObj.height != 0))
{width=imgObj.width;
height=imgObj.height;
k=width/height;
document.write (k);
if(k>=1){
if (width>=200){
width=200;
height=width/k;
}}
else
{if (height>=200){
height=200;
width=k*height;
}
}
showimg(theURL,width,height);
}
else
setTimeout(checkImg(' + theURL + '), 100)
}
}
function showimg(theURL,x,y)
{
document.write(<imgsrc=+theURL++width=+x++height=+y+border='0'+ +align='left'>);
}
//-->
&
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
