求助asp.net中如何将写代码将大图改为缩略图！追加分
asp.net中如何将写代码将大图改为缩略图！！用asp.net技术，怎么才可以像QQ相册那样，点击缩略图能查看原图的那种，怎么做？？？是不是要用到组件的啊，用组件又是如...
asp.net中如何将写代码将大图改为缩略图！！用asp.net技术，怎么才可以像QQ相册那样，点击缩略图能查看原图的那种，怎么做？？？是不是要用到组件的啊，用组件又是如何的！！！
代码是如何的，请同时给出前台同后台的代码，这样我就可以复制一下，是不是我想要的那样的效果，谢谢啦 展开
代码是如何的，请同时给出前台同后台的代码，这样我就可以复制一下，是不是我想要的那样的效果，谢谢啦 展开
展开全部
现已补充完整，实现点击缩略图打开新窗口显示大图效果，仅指定一个图片进行示例，多个图片请自行扩展：
楼上的是将图片的显示尺寸缩小的方法，但图片的大小未变。
我给出的是一个生成缩略图的自定义函数:只要在aspx.cs（代码文件）中调用，并给出已存在的原始图片的文件名称和希望缩略成的高度，就可以自动在网站中指定文件夹生成缩略图文件。
下面代码中我指定存放原始图片的文件夹是网站根目录下的pic，缩略图存放文件夹是网站根目录下的pic1。你直接复制到代码文件中即可使用，并可根据自身情况进行改动。
//============ 缩略图生成自定义函数 ============
private void ResizeImage(int height, string fileName)
{
string webFilePath = Server.MapPath("pic/" + fileName); //获取原图的服务器端文件路径
string webFilePath_s = Server.MapPath("pic1/" + fileName); //获取缩略图的服务器端文件路径
//使用System.Drawing命名空间的Image类的FromFile方法创建Image对象，参数为从中创建 Image 的文件的名称
System.Drawing.Image image = System.Drawing.Image.FromFile(webFilePath);
//GetThumbnailImage方法可返回 Image 对象的缩略图，参数为请求的缩略图的宽度（像素）、高度等。
System.Drawing.Image img = image.GetThumbnailImage(image.Width * height / image.Height , height , null , IntPtr.Zero);
img.Save(webFilePath_s, System.Drawing.Imaging.ImageFormat.Jpeg); //Image类的Save方法将此 Image 对象以指定格式保存到指定文件
img.Dispose(); //将图像占用资源释放
image.Dispose(); //将图像占用资源释放
}
比如，tree.jpg文件存放在网站根目录下的pic文件夹中，并且网站根目录下已有文件夹pic1，我输入代码 ResizeImage(150, "tree.jpg");
就可以生成一个高为150像素的小图片tree.jpg文件，存放在pic1文件夹中。
假设网站根目录下有2个页面a.aspx和b.aspx以及pic文件夹和pic1文件夹，pic文件夹中已存在图像tree.jgp图片文件。当浏览a.aspx页面时，自动生成缩略图并显示在页面上，单击缩略图，则打开b.aspx，显示原始图像。
下面是2个页面的对应关键代码：
1、a.aspx的页面代码及其对应的a.aspx.cs文件的代码：
a.aspx页面代码：
在<body></body>中插入如下代码，以显示缩略图
<img src="pic1/tree.jpg" style="cursor:pointer;" alt="点击看大图" onclick="javascript:window.open('b.aspx','big')"/>
a.aspx.cs文件的代码：
在Page_Load中加入 ResizeImage(150, "tree.jpg"); 语句，并在Page_Load下方复制如下的生成缩略图自定义函数：
private void ResizeImage(int height, string fileName)
{
string webFilePath = Server.MapPath("pic/" + fileName);
string webFilePath_s = Server.MapPath("pic1/" + fileName);
System.Drawing.Image image = System.Drawing.Image.FromFile(webFilePath);
System.Drawing.Image img = image.GetThumbnailImage(image.Width * height / image.Height, height, null, IntPtr.Zero);
img.Save(webFilePath_s, System.Drawing.Imaging.ImageFormat.Jpeg);
img.Dispose();
image.Dispose();
}
2、b.aspx页面代码
在<body></body>中插入如下代码，以显示原始图像
<img src="pic/tree.jpg" />
到此搞定你的要求
楼上的是将图片的显示尺寸缩小的方法，但图片的大小未变。
我给出的是一个生成缩略图的自定义函数:只要在aspx.cs（代码文件）中调用，并给出已存在的原始图片的文件名称和希望缩略成的高度，就可以自动在网站中指定文件夹生成缩略图文件。
下面代码中我指定存放原始图片的文件夹是网站根目录下的pic，缩略图存放文件夹是网站根目录下的pic1。你直接复制到代码文件中即可使用，并可根据自身情况进行改动。
//============ 缩略图生成自定义函数 ============
private void ResizeImage(int height, string fileName)
{
string webFilePath = Server.MapPath("pic/" + fileName); //获取原图的服务器端文件路径
string webFilePath_s = Server.MapPath("pic1/" + fileName); //获取缩略图的服务器端文件路径
//使用System.Drawing命名空间的Image类的FromFile方法创建Image对象，参数为从中创建 Image 的文件的名称
System.Drawing.Image image = System.Drawing.Image.FromFile(webFilePath);
//GetThumbnailImage方法可返回 Image 对象的缩略图，参数为请求的缩略图的宽度（像素）、高度等。
System.Drawing.Image img = image.GetThumbnailImage(image.Width * height / image.Height , height , null , IntPtr.Zero);
img.Save(webFilePath_s, System.Drawing.Imaging.ImageFormat.Jpeg); //Image类的Save方法将此 Image 对象以指定格式保存到指定文件
img.Dispose(); //将图像占用资源释放
image.Dispose(); //将图像占用资源释放
}
比如，tree.jpg文件存放在网站根目录下的pic文件夹中，并且网站根目录下已有文件夹pic1，我输入代码 ResizeImage(150, "tree.jpg");
就可以生成一个高为150像素的小图片tree.jpg文件，存放在pic1文件夹中。
假设网站根目录下有2个页面a.aspx和b.aspx以及pic文件夹和pic1文件夹，pic文件夹中已存在图像tree.jgp图片文件。当浏览a.aspx页面时，自动生成缩略图并显示在页面上，单击缩略图，则打开b.aspx，显示原始图像。
下面是2个页面的对应关键代码：
1、a.aspx的页面代码及其对应的a.aspx.cs文件的代码：
a.aspx页面代码：
在<body></body>中插入如下代码，以显示缩略图
<img src="pic1/tree.jpg" style="cursor:pointer;" alt="点击看大图" onclick="javascript:window.open('b.aspx','big')"/>
a.aspx.cs文件的代码：
在Page_Load中加入 ResizeImage(150, "tree.jpg"); 语句，并在Page_Load下方复制如下的生成缩略图自定义函数：
private void ResizeImage(int height, string fileName)
{
string webFilePath = Server.MapPath("pic/" + fileName);
string webFilePath_s = Server.MapPath("pic1/" + fileName);
System.Drawing.Image image = System.Drawing.Image.FromFile(webFilePath);
System.Drawing.Image img = image.GetThumbnailImage(image.Width * height / image.Height, height, null, IntPtr.Zero);
img.Save(webFilePath_s, System.Drawing.Imaging.ImageFormat.Jpeg);
img.Dispose();
image.Dispose();
}
2、b.aspx页面代码
在<body></body>中插入如下代码，以显示原始图像
<img src="pic/tree.jpg" />
到此搞定你的要求
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
给你一种简单的方法
讲大图等比例缩小
<!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">
<title>css等比例缩小图片</title>
<head>
<style type="text/css">
<!--
body {
text-align: center;
margin: 20px auto;
padding: 0px;
font-size:14px;
color:red
}
#pic{
margin:5px auto;
width:500px;
padding:0;
border:1px solid #333;
}
#pic img{
max-width:200px;
width:expression(document.body.clientWidth > 200?"200px":"auto" );
display:block;
border:0
}
-->
</style>
</head>
<body>将宽度强制为200px后图片高度被等比例缩小
<div id="pic">
<a href="#"><img src="http://www.codefans.net/jscss/demoimg/wall5.jpg" /></a>
</div>
原图：
<br />
<img src="http://www.codefans.net/jscss/demoimg/wall5.jpg" />
</body>
讲大图等比例缩小
<!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">
<title>css等比例缩小图片</title>
<head>
<style type="text/css">
<!--
body {
text-align: center;
margin: 20px auto;
padding: 0px;
font-size:14px;
color:red
}
#pic{
margin:5px auto;
width:500px;
padding:0;
border:1px solid #333;
}
#pic img{
max-width:200px;
width:expression(document.body.clientWidth > 200?"200px":"auto" );
display:block;
border:0
}
-->
</style>
</head>
<body>将宽度强制为200px后图片高度被等比例缩小
<div id="pic">
<a href="#"><img src="http://www.codefans.net/jscss/demoimg/wall5.jpg" /></a>
</div>
原图：
<br />
<img src="http://www.codefans.net/jscss/demoimg/wall5.jpg" />
</body>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
