当前位置: 代码迷 >> ASP.NET >> ASP.NET图片等比例显示的有关问题
  详细解决方案

ASP.NET图片等比例显示的有关问题

热度:7867   发布时间:2013-02-25 00:00:00.0
ASP.NET图片等比例显示的问题
如题。一个固定大小(有初始化大小)的图片框控件要显示图片经常是将图片铺满显示,这样对一些和图片框大小不同比例的图片来说会出现变形,请问我该如何让图片全部显示但让图片保持原比例呢?可以等比例缩放,但不要变形。(类似桌面背景图片的显示方式:平铺、拉伸、居中。我要的是居中效果!)

 

注:WinForm里面的图片框就有mode模式,里面就能实现这个效果!

PS:缩略图技术试过了,不行,这样只是让图片等比例缩放,显示的时候还是会铺满图片框!

最好有例子,或者代码段,谢谢!


------解决方案--------------------------------------------------------
js图片等比缩放
http://www.cnblogs.com/aqiang/archive/2008/05/08/1188728

<script language="JavaScript" type="text/javascript">
 <!-- 
function DrawImage(ImgD,FitWidth,FitHeight){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
if(image.width/image.height>= FitWidth/FitHeight){
if(image.width>FitWidth){
ImgD.width=FitWidth;
ImgD.height=(image.height*FitWidth)/image.width;
}else{
ImgD.width=image.width; 
ImgD.height=image.height;
}
} else{
if(image.height>FitHeight){
ImgD.height=FitHeight;
ImgD.width=(image.width*FitHeight)/image.height;
}else{
ImgD.width=image.width; 
ImgD.height=image.height;

}
}
 }
 //-->
 </script>

<img src="XXXX" alt="自动缩放后的效果" onload="javascript:DrawImage(this,"200","200");" />

图片外边框
<table width='150' height='150' border='0' cellpadding='0' cellspacing='0' style='border: 1px solid #666666; display:block; width:150px; height:150px;padding:50px;'>
<tr>
<td width='300' height='68' align='center'>&nbsp;</td>
</tr>
</table>
------解决方案--------------------------------------------------------
比较简便的asp.net缩略图方法是GetThumbnailImage();
但生成的图片质量不太好.
更多是使用System.Drawing.Graphics的DrawImage()方法来生成缩略图

下面转一个示例代码,注意此例为了追求高质量,在原图与最终缩略图之间,还生成了一个"中间图片",你可以去掉中间图的处理,直接生成缩略图。
System.Drawing.Graphics的DrawImage()很强大,可以实现在原图两边或上下填充像素来保持图片比例,也可以截去原图上下或左右部分像素来实现图片不变形。
还可以设定DrawImage()参数,来选定原图中的指定部分(就好比用鼠标在原图上任意圈选一个方块区域)用于生成缩略图。
可以参考http://msdn.microsoft.com/zh-cn/library/system.drawing.graphics.drawimage(VS.80).aspx


C# code
代码如下: /// <summary>     /// asp.net上传图片并生成缩略图     /// </summary>     /// <param name="upImage">HtmlInputFile控件</param>     /// <param name="sSavePath">保存的路径,些为相对服务器路径的下的文件夹</param>     /// <param name="sThumbExtension">缩略图的thumb</param>     /// <param name="intThumbWidth">生成缩略图的宽度</param>     /// <param name="intThumbHeight">生成缩略图的高度</param>     /// <returns>缩略图名称</returns>     public string UpLoadImage(HtmlInputFile upImage, string sSavePath, string sThumbExtension, int intThumbWidth, int intThumbHeight)     {         string sThumbFile = "";         string sFilename = "";                 if (upImage.PostedFile != null)         {             HttpPostedFile myFile = upImage.PostedFile;             int nFileLen = myFile.ContentLength;             if (nFileLen == 0)                 return "没有选择上传图片";                         //获取upImage选择文件的扩展名             string extendName = System.IO.Path.GetExtension(myFile.FileName).ToLower();             //判断是否为图片格式             if (extendName != ".jpg" && extendName != ".jpge" && extendName != ".gif" && extendName != ".bmp" && extendName != ".png")                 return "图片格式不正确";                          byte[] myData = new Byte[nFileLen];             myFile.InputStream.Read(myData, 0, nFileLen);             sFilename = System.IO.Path.GetFileName(myFile.FileName);             int file_append = 0;             //检查当前文件夹下是否有同名图片,有则在文件名+1             while (System.IO.File.Exists(System.Web.HttpContext.Current.Server.MapPath(sSavePath + sFilename)))             {                 file_append++;                 sFilename = System.IO.Path.GetFileNameWithoutExtension(myFile.FileName)                     + file_append.ToString() + extendName;             }             System.IO.FileStream newFile                 = new System.IO.FileStream(System.Web.HttpContext.Current.Server.MapPath(sSavePath + sFilename),                 System.IO.FileMode.Create, System.IO.FileAccess.Write);             newFile.Write(myData, 0, myData.Length);             newFile.Close();             //以上为上传原图             try             {                 //原图加载                 using (System.Drawing.Image sourceImage = System.Drawing.Image.FromFile(System.Web.HttpContext.Current.Server.MapPath(sSavePath + sFilename)))                 {                     //原图宽度和高度                     int width = sourceImage.Width;                     int height = sourceImage.Height;                     int smallWidth;                     int smallHeight;                     //获取第一张绘制图的大小,(比较 原图的宽/缩略图的宽  和 原图的高/缩略图的高)                     if (((decimal)width) / height <= ((decimal)intThumbWidth) / intThumbHeight)                     {                         smallWidth = intThumbWidth;                         smallHeight = intThumbWidth * height / width;                     }                     else                     {                         smallWidth = intThumbHeight * width / height;                         smallHeight = intThumbHeight;                     }                     //判断缩略图在当前文件夹下是否同名称文件存在                     file_append = 0;                     sThumbFile = sThumbExtension + System.IO.Path.GetFileNameWithoutExtension(myFile.FileName) + extendName;                     while (System.IO.File.Exists(System.Web.HttpContext.Current.Server.MapPath(sSavePath + sThumbFile)))                     {                         file_append++;                         sThumbFile = sThumbExtension + System.IO.Path.GetFileNameWithoutExtension(myFile.FileName) +                             file_append.ToString() + extendName;                     }                     //缩略图保存的绝对路径                     string smallImagePath = System.Web.HttpContext.Current.Server.MapPath(sSavePath) + sThumbFile;                     //新建一个图板,以最小等比例压缩大小绘制原图                     using (System.Drawing.Image bitmap = new System.Drawing.Bitmap(smallWidth, smallHeight))                     {                         //绘制中间图                         using (System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap))                         {                             //高清,平滑                             g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;                             g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;                             g.Clear(Color.Black);                             g.DrawImage(                             sourceImage,                             new System.Drawing.Rectangle(0, 0, smallWidth, smallHeight),                             new System.Drawing.Rectangle(0, 0, width, height),                             System.Drawing.GraphicsUnit.Pixel                             );                         }                         //新建一个图板,以缩略图大小绘制中间图                         using (System.Drawing.Image bitmap1 = new System.Drawing.Bitmap(intThumbWidth, intThumbHeight))                         {                             //绘制缩略图                             using (System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap1))                             {                                 //高清,平滑                                 g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;                                 g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;                                 g.Clear(Color.Black);                                 int lwidth = (smallWidth - intThumbWidth) / 2;                                 int bheight = (smallHeight - intThumbHeight) / 2;                                 g.DrawImage(bitmap, new Rectangle(0, 0, intThumbWidth, intThumbHeight), lwidth, bheight, intThumbWidth, intThumbHeight, GraphicsUnit.Pixel);                                 g.Dispose();                                 bitmap1.Save(smallImagePath, System.Drawing.Imaging.ImageFormat.Jpeg);                             }                         }                     }                 }             }             catch             {                 //出错则删除                 System.IO.File.Delete(System.Web.HttpContext.Current.Server.MapPath(sSavePath + sFilename));                 return "图片格式不正确";             }             //返回缩略图名称             return sThumbFile;         }         return "没有选择图片";     }HtmlInputFile控件我想大家都应该知道的,就是input type=file.... 下面把调用代码也一起C上来<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">     <title>无标题页</title> </head> <body>     <form id="form1" runat="server">     <div>                 <input id="File1" runat="server" type="file" /></div><asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />     </form> </body> </html>     protected void Button1_Click(object sender, EventArgs e)     {         string a = this.UpLoadImage(this.File1, "UpLoad/", "thumb_", 118, 118);       }
  相关解决方案