如题。一个固定大小(有初始化大小)的图片框控件要显示图片经常是将图片铺满显示,这样对一些和图片框大小不同比例的图片来说会出现变形,请问我该如何让图片全部显示但让图片保持原比例呢?可以等比例缩放,但不要变形。(类似桌面背景图片的显示方式:平铺、拉伸、居中。我要的是居中效果!)
注: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'> </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); }