整理各种js按比例缩放图片方法
来源:仰天一笑的blog 发布时间:2007-09-27 20:01:00
asp之家注:在网页设计或编程中如何以最方便的方法来处理图片的宽高,以达到最佳的显示效果,这个问题相信很多网页制作人员都遇到过,最麻烦最费时间的做法是用制图软件Photoshop等来一张张处理,这种方法如果处理一两张还好点,多了真是麻烦;最快的做法是直接给图片固定一个宽高,这样做的缺点就是影响页面的美观,而大多数的做法是使用JS来控制图片的显示尺寸在一定的范围内,不会比例失调,保证了图片不会变形,相信这种方法是最合适的。本文就给你介绍了使用js来处理图片尺寸的几个方法:
看到海东兄的按比例缩放图片 ,我就把我写的js版本的也拿出来show一下,哈哈!
js版本(by仰天一笑):
function resizeImage(obj, MaxW, MaxH)
{
var imageObject = obj;
var state = imageObject.readyState;
if(state!='complete')
{
setTimeout("resizeImage("+imageObject+","+MaxW+","+MaxH+")",50);
return;
}
var oldImage = new Image();
oldImage.src = imageObject.src;
var dW = oldImage.width;
var dH = oldImage.height;
if(dW>MaxW || dH>MaxH)
{
a = dW/MaxW; b = dH/MaxH;
if( b>a ) a = b;
dW = dW/a; dH = dH/a;
}
if(dW > 0 && dH > 0)
{
imageObject.width = dW;
imageObject.height = dH;
}
}
使用很简单:
<img src="../pic.jpg" onload=’resizeImage(this,60,90)>
就OK了;同时也附上C#版本的 :
<summary>
/// 按比例缩放图片
/// </summary>
/// <param name="imgUrl">图片的路径</param>
/// <param name="imgHeight">图片的高度</param>
/// <param name="imgWidth">图片的宽度</param>
/// <returns></returns>
public static string GetImageSize(string imgUrl,int imgHeight,int imgWidth)
{
string fileName = System.Web.HttpContext.Current.Server.MapPath(imgUrl);
string strResult = string.Empty;
if(System.IO.File.Exists(fileName) && imgHeight != 0 && imgWidth != 0)
{
decimal desWidth;decimal desHeight; //目标宽高
System.Drawing.Image objImage = System.Drawing.Image.FromFile(fileName);
decimal radioAct = (decimal)objImage.Width/(decimal)objImage.Height; //原始图片的宽高比
decimal radioLoc = (decimal)imgWidth/(decimal)imgHeight; //图片位的宽高比
if(radioAct > radioLoc) //原始图片比图片位宽
{
decimal dcmZoom = (decimal)imgWidth/(decimal)objImage.Width;
desHeight = objImage.Height*dcmZoom;
desWidth = imgWidth;
}
else
{
decimal dcmZoom = (decimal)imgHeight/(decimal)objImage.Height;
desWidth = objImage.Width*dcmZoom;
desHeight = imgHeight;
}
objImage.Dispose(); //释放资源
strResult = "width=\"" + Convert.ToString((int)desWidth) + "\" height=\""
+ Convert.ToString((int)desHeight) + "\" ";
}
return strResult;
}
猜你喜欢
- 目前代码应该没什么bug了,兼容IE6.0 & FF 1.5, 通过xHTML 的Transitional验证和 CSS 验证。为了
- 这里所说的“小偷”指的是在ASP中运用XML中的xmlhttp组件提供的强大功能,把远程网站上的数据(图片,网页及其他文件)抓取采集到本地,
- js浮点数计算有时是不准确的,比如7*0.8 == 7*8/10的值为false,因为7*0.8=5.6000000000000005,乘出
- 工作闲余,除抱有浓厚兴趣领域,我很不喜欢看些晦涩难懂的文字,于是想像茶余饭后的闲聊,随谈点话题。一次和一朋友吃饭聊天,随便聊到了他最近做的一
- 我们可以先建立一个包含文件名,文件标题的待检索文件的数据库,然后,用ADO方式来访问它,并建立记录集对象。具体代码和说明见下:
- <form name="frm"><select name=school onchange="
- 现在很多以内容为核心的网站上都在文章底部添加了社会化分享按钮,能让浏览用户在发现一篇有价值的文章时,可以通过社会化网络快速分享给自己的好友,
- Example.asp<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001&qu
- MySQL数据库由于它本身的小巧和操作的高效, 在数据库应用中越来越多的被采用.本文中列举了一个P2P应用开发实例,实例中使用了MySQL来
- 编写思路:把本地文件在客户端通过base64编码以后发送目的地.测试过程中,上传文件过大,导致超时不成功.后来经过改善.把编码分段发送.测试
- 下面我们以论坛排行榜举例说明:<% @ LANGUAGE="VBSCRIPT" %&
- 在my.cnf中设置了sql_mode='STRICT_TRANS_TABLES';却发现还是有非法数据的写入,比如无符号整
- 最近几天仔细研究了一下vertical-align这个属性,结果让我大吃一惊,这个很“资深”的CSS标准竟然在各个浏览器里面的表现都各不相同
- 假如你拥有一个庞大的网站,内容又多,那么来访者往往很难找到自己所需要的东东,这时候你就需要一个站内搜索来帮助来访者更快的找到索要的资料了!现
- 以下以 IE 代替 Internet Explorer,以 MF 代替 
- jQuery 真是一个非常伟大的 javascript library,至少在我不会写 JS 的时候第一时间接触了它,虽然还有其他很多优秀的
- 我在程序首端添加了On Error Resume Next ,以更好地处理执行时引起的错误,但在数据库访问中引出了麻烦,因为我在一个查询操作
- 1. RS.OPEN SQL,CONN,A,B,C2. CONN.EXECUTE(SQL,RowsAffected,C)参数含义:SQL的值
- 我从11岁开始编程,并且一直都很喜欢技术和编程。这些是我一直以来获得的经验教训。作为一个程序员,你可能需要这样的忠告。我更希望每个人在获取这
- '创建DOM对象set objDom=server.CreateObject("MicroSoft.XMLDom"