明辉站/网站教程/内容

如何取得设置图片大小

网站教程2024-01-26 阅读
[摘要]大家知道,丰富多彩的Web页面离不开图片的支持,图像一方面增加了网页的生动性,另一方面增加了网页规模,使下载速度减慢。如何让一图片能以适当大小在页面上显示,成了我一时解不开的谜。 前不久,我为单位开发了一个教学科研网站,采用新闻管理系统,首页上新闻栏目中,需要从数据库中调用图片文件作为图片新闻中的...

大家知道,丰富多彩的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.okasp.com/techinfo/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'>);

}

//-->

</script>

<script language=javascript>

checkImg(http://www.okasp.com/techinfo/Bt0085.jpg);

</script>



测试通过!我欣喜若狂,立即将代码移植到首页文件(default.asp)中,然后通过服务器测试,结果当我输入网址的时候,浏览器中出现的已经处理好后的图片,一下子我傻眼了,明明我运行首页文件,结果却出现图片。另外我发现浏览器工具栏“后退”工具可用,我单击“后退”,这时候出现了首页页面内容。再次测试,结果显示很正常。经过反复测试,我发现当每次更新图片的时候会出现同样的现象,另外当我每打开一台未访问过本网站的计算机也会出现同样问题。我越来越糊涂,百思不得其解。为什么出现如此现象?我想了很多方案,结果都在测试时失败。

情急之中,我到网上去查了Image()对象的特性,主要用来实现图片翻滚效果,可以将图片提前下载到客户端,让图片之间的切换没有时间延迟。如下边的代码一样,使用 Image 对象的 src 属性指定图片的路径 (URL),这样就将 images 目录下的图片 pic2.gif 下载到客户端了:

var myImg = new Image();

myImg.src = pic.gif;

这段代码将迫使浏览器开始从服务器下载指定的图片,如果客户端的缓存 (Cache) 中有这个图片的话,浏览器会自动将其覆盖,那样,当用户将鼠标移动到图片上边的时候,图片将会立即变换,不会有时间的延迟。所以如果第一次显示图片后,第二次就能正常显示首页文件就是这个原因了。由此,我得出不能用Image()对象获取图象的属性这结论,应该改变解决问题的方案。

我查了许多有关javascript的书籍,有一本书上在编写“图的跳动”特效的时候,这样写到:“页面的<IMG>元素可以定义其显示范围,即图的高度Height和宽度(Width)。处理事件触发时,动态地改变图的两个属性就可达到效果;”根据提示,我很快完成了测试三的代码,主要代码如下:

测试三

<script>

function show()

{var w,h;

var k;

var con;

w=smallslot.width;

h=smallslot.height;

k=w/h;

if(k>=1){

if (w>=200){

w=200;

h=w/k;

}}

else

{if (h>=150){

h=150;

w=k*h;

}

}

return w;

}

</script>

<img border=0 ID=smallslot src=http://www.okasp.com/techinfo/4.jpg onload=javascript:width=x; align=left>

<script languge=javascript>

var x=show();

// document.write(x);

</script>

在这段代码中,我考虑到使用<IMG>中的ID,就可以定义图的宽度和高度,只要能控制图象的宽度,就可在Web预览中实现等比例显示(高度随宽度变化),所以我将处理后图象的width作为show()函数的返回值。在<IMG>中用onload事件调用图象的Width。我再一次测试,通过!再次移植到首页代码中,再次测试,这时候问题又出现了:首页上图片新闻中图片居然没有显示。我单击地址栏中的“转到”按钮,这时候图片能正常显示了。实践告诉我又一次失败!因为上网者唯一习惯做的是输入网址、键入回车这两个动作。

在此基础上,我做了以下尝试:

(1)、<head></head>之间<meta http-equiv=refresh content=10; url=default.asp>.让隔10秒自动刷新屏幕,结果图片能正常显示,但不断刷屏让视觉很不舒服。

(2)、window.location.reload()重新装载页面,可是结果是一直处于装载页面过程中,使网页不能正确显示。

(3)、<IMG SRC=http://www.okasp.com/techinfo/1.jpg border=0 onLoad=javascript:if(this.width>200) this.width=200; align=left>,测试能够通过,但如果图象width<height,并且width>200px,则页面显示效果为高度超过150,这样如果没有K=width/height的约束,页面效果是不合理的,因此不能采用。



我有些黔驴技穷的感觉,找不出更好的办法解决这个问题,渐渐地失去了信心,为这个问题我已经两个晚上没睡着觉了,我准备最后一搏了。我仔细分析了我的测试三,我发现主要原因是onload事件是页面载入时触发的事件。Onload在<Img>元素中使用,当IE解释到此处,需装载页面才能触发”javascript:width=x;

因此要重新装载页面才能显示图片。另外,我知道Onload()一般用在<Body>元素中,预先完成装载页面时触发的事件。所以,我将<IMG>中Onload()事件放到了<Body>中去,代码如下:

测试四:

<body onload=window.smallslot.width=show(); >

<script>

function show()

{var w,h;

var k;

var con;

w=smallslot.width;

h=smallslot.height;

k=w/h;

if(k>=1){

if (w>=200){

w=200;

h=w/k;

}}

else

{if (h>=150){

h=150;

w=k*h;

}

}

return w;

}

</script>

<img border=0 ID=smallslot src=http://www.okasp.com/techinfo/1.jpg align=left>this is a test!

再次测试,通过了!而且首页调用成功!我成功了!
(出处:Viphot)

……

相关阅读