图片等比例缩放
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>最新javascript自动按比例显示图片，按比例压缩图片显示</title>
<script type="text/javascript">
function AutoResizeImage(maxWidth,maxHeight,objImg){
var img = new Image();
img.src = objImg.src;
var hRatio;
var wRatio;
var Ratio = 1;
var w = img.width;
var h = img.height;
wRatio = maxWidth / w;
hRatio = maxHeight / h;
if (maxWidth ==0 && maxHeight==0){
Ratio = 1;
}else if (maxWidth==0){//
if (hRatio<1) Ratio = hRatio;
}else if (maxHeight==0){
if (wRatio<1) Ratio = wRatio;
}else if (wRatio<1 || hRatio<1){
Ratio = (wRatio<=hRatio?wRatio:hRatio);
}
if (Ratio<1){
w = w * Ratio;
h = h * Ratio;
}
objImg.height = h;
objImg.width = w;
}
</script>
</head>
<body>
<br />
原图显示（534 X 800）<br />
onload="AutoResizeImage(0,0,this)<br />
<a href=" http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg " target="_blank"><img src=" http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg " border="0" width="0" height="0" onload="AutoResizeImage(0,0,this)" alt="534 X 800"/></a><br/><br />
1.按宽度250压缩,不限制高度 按比例压缩<br />
onload="AutoResizeImage(250,0,this)"<br />
<a href=" http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx " target="_blank"><img src=" http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg " border="0" width="0" height="0" onload="AutoResizeImage(250,0,this)" alt="250 X 374"/></a><br /><br />
2.按高度250压缩,不限制宽度 按比例压缩<br />
onload="AutoResizeImage(0,250,this)"<br />
<a href=" http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx " target="_blank"><img src=" http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg " border="0" width="0" height="0" onload="AutoResizeImage(0,250,this)" alt="166 X 250"/></a><br /><br />
3.按高度250宽度250 按比例压缩<br />
onload="AutoResizeImage(250,250,this)"<br />
<a href=" http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx " target="_blank"><img src=" http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg " border="0" width="0" height="0" onload="AutoResizeImage(250,250,this)" alt="200 X 300"/></a><br /><br />
4.高宽不等比例压缩 （400 X 512）,此时高度不变，会自动按高度的比例压缩。<br />
onload="AutoResizeImage(400,512,this)"<br />
<a href=" http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx " target="_blank"><img src=" http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg " border="0" width="0" height="0" onload="AutoResizeImage(400,512,this)" alt="341 X 512"/></a><br /><br />
5.高宽不等比例压缩 （300 X 600）,此时宽度不变，会自动按宽度的比例压缩。<br />
onload="AutoResizeImage(300,600,this)"<br />
<a href=" http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx " target="_blank"><img src=" http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg " border="0" width="0" height="0" onload="AutoResizeImage(300,600,this)" alt="300 X 449"/></a><br /><br />
6.如果图片本来的高度和宽度小于压缩的最大高度和宽度，则不会拉大显示图片（按原图显示）<br />
原图444 x 207,压缩为 500 x 600,将保持原图显示<br />
onload="AutoResizeImage(500,600,this)"<br />
<a href=" http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx " target="_blank"><img src=" http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/242776/o_20070410_b7409cd284a0f799a357uePcEFa6ty0X.jpg " border="0" width="0" height="0" onload="AutoResizeImage(500,600,this)" alt="444 X 207"/></a><br /><br />
</body>
</html>
****************************************************************②*****************************************************
<html>
<head>
<title>根据图片实际比例进行缩放</title>
<script type="text/javascript" src=">
<script type="text/javascript" src="study/global.js"></script>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312' />
<style>body{font-size:12px;}</style>
</head>
<body>
<img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" />
<p id="pic" style=" width:550px; height:500px; border:solid 1px #f60; overflow:hidden;">
<img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" align="center" height=""/>
</p>
<input type="button" value="生成CMD" id="go" onclick="PicUtil.fixCenter($('#pic'))" />
<br><br>
<div id="msg"></div>
<script>
var PicUtil={
cacheImg:$('<img />'),
//以容器为基准, 根据图片实际比例进行缩放
fixCenter:function(box){
var img=$("img",$(box));
if(img.size()>0){
var o = this.getProperty(img[0]);
if(o.wf>o.w0 && o.hf>o.h0){
this.fixOnly(box);
}else if(o.wf<o.w0 || o.hf<o.h0){
img.width(o.wf).height(o.hf);
if(o.hp>o.hf) $("<div style='clear:both;width:1px;height:+((o.hp-o.hf)/2)+px'></div>").insertBefore(img);
if(o.wp>o.wf) $(box).css("text-align","center");
}
}
},
fixOnly:function(box){
var img=$("img",$(box));
if(img.size()>0){
$(box).css({"background-image":"url("+img[0].src+")","background-repeat":"no-repeat","background-position":"center"}).empty();
}
},
getProperty:function(img){
if(!img || !img.src) return {};
var tmpImg=this.cacheImg;
tmpImg[0].src=img.src+"";
var parent=$(img).parent();
var rs={w0:tmpImg[0].width,h0:tmpImg[0].height,w:img.width,h:img.height,wp:parent.width(),hp:parent.height()};
if(rs.w0==0 || rs.h0==0) return {};
rs.wf=Math.floor(rs.h0/rs.w0*rs.wp)>rs.hp?(Math.floor(rs.w0/rs.h0*rs.hp)):rs.wp;
rs.hf=Math.floor(rs.h0/rs.w0*rs.wp)>rs.hp?rs.hp:Math.floor(rs.h0/rs.w0*rs.wp);
return rs;
}
}
function msg(x,y){
if(!y) $("#msg").html(x); else $("#msg").html(x+"<br>"+$("#msg").html());
}
</script>
</body>
</html>
*****************************************************************③****************************************************************
using System;
using System.IO;
using System.Drawing;
using System.Drawing.Imaging;
public class ImageThumbnail
{
public Image ResourceImage;
private int ImageWidth;
private int ImageHeight;
public string ErrorMessage;
public ImageThumbnail(string ImageFileName)
{
ResourceImage = Image.FromFile(ImageFileName);
ErrorMessage = "";
}
public void DisImage()
{
ResourceImage.Dispose();
}
public bool ThumbnailCallback()
{
return false;
}
// 方法1，按大小
/// <summary>
/// 按大小缩放图片
/// </summary>
/// <param name="Width">缩放到的宽</param>
/// <param name="Height">缩放到的高</param>
/// <param name="targetFilePath">图片的名字</param>
/// <returns>bool</returns>
public bool ReducedImage(int Width, int Height, string targetFilePath)
{
try
{
Image ReducedImage;
Image.GetThumbnailImageAbort callb = new Image.GetThumbnailImageAbort(ThumbnailCallback);
ReducedImage = ResourceImage.GetThumbnailImage(Width, Height, callb, IntPtr.Zero);
ReducedImage.Save(@targetFilePath, ImageFormat.Jpeg);
ReducedImage.Dispose();
return true;
}
catch (Exception e)
{
ErrorMessage = e.Message;
return false;
}
}
// 方法2，按百分比 缩小60% Percent为0.6 targetFilePath为目标路径
/// <summary>
/// 按百分比缩放
/// </summary>
/// <param name="Percent">小数：0.4表示百分之40</param>
/// <param name="targetFilePath">图片的名称</param>
/// <returns>bool</returns>
public bool ReducedImage(double Percent, string targetFilePath)
{
try
{
Image ReducedImage;
Image.GetThumbnailImageAbort callb = new Image.GetThumbnailImageAbort(ThumbnailCallback);
ImageWidth = Convert.ToInt32(ResourceImage.Width * Percent);
ImageHeight = (ResourceImage.Height)*ImageWidth/ ResourceImage.Width;//等比例缩放
ReducedImage = ResourceImage.GetThumbnailImage(ImageWidth, ImageHeight, callb, IntPtr.Zero);
ReducedImage.Save(@targetFilePath, ImageFormat.Jpeg);
ReducedImage.Dispose();
return true;
}
catch (Exception e)
{
ErrorMessage = e.Message;
return false;
}
}
}
这是后台代码：
protected void btnUpload_Click(object sender, EventArgs e)
{
if (FileUpload1.PostedFile.FileName == "")
{
Response.Write("请选择文件！");
}
else
{
string filepath = FileUpload1.PostedFile.FileName;
string filename = filepath.Substring(filepath.LastIndexOf("\\") + 1);
filename=filepath.Substring(filename.LastIndexOf(".")+0);
filename = DateTime.Now.ToString("yyyyMMddHHmmssffff") + filename;
string serverpath1 = Server.MapPath("images/") + filename;
string serverpath2 = Server.MapPath("images/") + "small" + filename;
FileUpload1.PostedFile.SaveAs(serverpath1);
ImageThumbnail img = new ImageThumbnail(serverpath1);
img.ReducedImage(100,70, serverpath2);//80,50 表示图片的宽高
Response.Write("上传成功！");
}
}