缩略图:比喻一张图片宽度为1000px,大小为800K,经过缩略后变成一张宽度100px,大小10K的图片。

先给出界面:

总体的流程分5步如下图:

1.添加一个html:GetminPic.html

代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form action="Getmin.ashx" method="post" enctype="multipart/form-data">
图片:<input type="file" name="file" id="file" onchange="javascript:fileInfo();" />
<p style="font-size:12px;">原图宽:<label id="ow"></label>&nbsp;原图高:<label id="oh"></label>&nbsp;
原图大小:<label id="os"></label>KB</p>
<p>设置宽度:<input type="text" name="width" style="width:50px;"/>
<span style="color:#09a02c;font-size:12px">高度按原图比例折算</span></p>
<p><input type="submit" style="color:#ff6a00" value="下载缩略图" /> </p>
</form> </body>
</html>
<script type="text/javascript">
//上传前获取图片信息(用html5的File)
function fileInfo() {
var f = document.getElementById("file").files[];
var reader = new FileReader();
reader.readAsDataURL(f);
reader.onload = function (e) {
var data = e.target.result;
//加载一个图片获取宽度高度
var image = new Image();
image.src = data;
image.onload = function () {
var width = image.width;
var height = image.height;
var size = parseInt(f.size / );
document.getElementById("ow").innerHTML = width;
document.getElementById("oh").innerHTML = height;
document.getElementById("os").innerHTML = size;
}; }
}
</script>

2.添加一个一般处理程序:Getmin.ashx

代码:

 public void ProcessRequest(HttpContext context)
{
//1.获取用户上传的文件流
HttpPostedFile file = context.Request.Files[];
//获取文件名
string fileName = file.FileName;
//获取扩展名
string Extension = Path.GetExtension(fileName).ToUpper();
//2.根据用户上传的文件流创建一个图片
using (Image originalImage = Image.FromStream(file.InputStream))
{
//获取原始图片的宽和高
int owidth = originalImage.Width;
int oheight = originalImage.Height;
//缩略图的宽
int mwidth = Convert.ToInt32(context.Request.Form["width"]);
//等比例的高,取整数
int mheight = mwidth * oheight / owidth;
//3.根据原始图片,等比例创建一个缩小后的图片
using (Image minImage = new Bitmap(mwidth, mheight))
{
//4.把大图片内容画到小图片上
//基于小图创建一个画布对象
Graphics gmin = Graphics.FromImage(minImage);
//把大图画到小图上
gmin.DrawImage(originalImage, , , mwidth, mheight); //5.下载缩略图
MemoryStream ms = new MemoryStream();
//判断图片类型
ImageFormat imageFormat = null;
string ContentType = "";
switch (Extension)
{
case ".JPG": imageFormat = ImageFormat.Jpeg; ContentType = "image/jpeg"; break;
case ".PNG": imageFormat = ImageFormat.Png; ContentType = "image/png"; break;
case ".GIF": imageFormat = ImageFormat.Gif; ContentType = "image/gif"; break;
//................如需要其他图片格式继续添加
}
minImage.Save(ms,imageFormat);
context.Response.ClearContent();
context.Response.AddHeader("Content-Disposition", "attachment; filename=" + HttpUtility.UrlEncode(fileName, System.Text.Encoding.UTF8));
context.Response.ContentType=ContentType;
context.Response.BinaryWrite(ms.ToArray());
context.Response.End();
}
}
} public bool IsReusable
{
get
{
return false;
}
}

代码注释已经很清晰了,所以也不一一解析了。

3.效果

 3.1挑一张计算机里的图片:

3.2上传前:

3.3把宽度设成200后点击下载

3.4查看已经下载的文件

demo下载:http://pan.baidu.com/s/1jHiIXuQ  提取密码:fewx

.NET生成缩略图并下载的更多相关文章

  1. 使用Uploadify实现上传图片生成缩略图例子,实时显示进度条

    不了解Uploadify的,先看看前一篇详细说明 http://www.cnblogs.com/XuebinDing/archive/2012/04/26/2470995.html Uploadify ...

  2. Java生成缩略图Thumbnailator(转载)

    转自(http://rensanning.iteye.com/blog/1545708) Thumbnailator 是一个为Java界面更流畅的缩略图生成库.从API提供现有的图像文件和图像对象的缩 ...

  3. php 使用 ffmpeg 转换视频,截图,并生成缩略图

    http://blog.csdn.net/toss156/article/details/7003059 把ffmpeg 和  生成缩略图整合了一下. include("ImageResiz ...

  4. openresty + lua-resty-weedfs + weedfs + graphicsmagick动态生成缩略图(类似淘宝方案)

    openresty + lua-resty-weedfs + weedfs + graphicsmagick动态生成缩略图(类似淘宝方案) --大部分的网站都要涉及到图片缩略图的处理,比如新闻配图,电 ...

  5. [转]Phantomjs实现获取网页快照并生成缩略图

    Shell脚本实现获取网页快照并生成缩略图 这篇文章主要介绍了Shell脚本实现获取网页快照并生成缩略图,本文获取网页快照使用phantomjs.生成缩略图使用ImageMagick,需要的朋友可以参 ...

  6. java图片裁剪和java生成缩略图

    一.缩略图 在浏览相冊的时候.可能须要生成相应的缩略图. 直接上代码: public class ImageUtil { private Logger log = LoggerFactory.getL ...

  7. 如何安装nginx_lua_module模块,升级nginx,nginx-lua-fastdfs-GraphicsMagick动态生成缩略图,实现图片自动裁剪缩放

    如何安装nginx_lua_module模块,升级nginx,nginx-lua-fastdfs-GraphicsMagick动态生成缩略图,实现图片自动裁剪缩放 参考网站:nginx-lua-fas ...

  8. 使用nginx生成缩略图

    nginx中可以使用 --with-http_image_filter_module 这个模块,今天发现在github上发现国人开发的一款模块 模块同时支持 Nginx 和 tengine 本ngin ...

  9. fastdfs+nginx+image_filter安装与生成缩略图

    fastdfs简介 类似google FS的一个轻量级分布式文件系统,纯C实现,支持linux.FreeBSD等UNIX系统: 只能通过API访问,不支持POXIS: 文件不分块存储,上传的文件和OS ...

随机推荐

  1. web开发必备-网络基础知识---记录一下

    1.osi 7层网络模型 2.socket 套接字编程 PS:一个从事web开发的人来说,我们是使用http协议来和服务器来进行交互.后面会详细的分析这个过程.

  2. redmine v3.02版的安装问题

    redmine v3.0.2版的安装问题 参考上次在朋友公司的云主机上安装的过程: 1. 下载 2. gem install bundler 3. bundle install 出现 rmagick ...

  3. ab 测试模块高并发

    转载:http://gekie.iteye.com/blog/1704235 作为程序员,写好一个模块后,不知道这个模块在高并发的情况下能不能平稳过渡,这里所说的平稳过渡是指,在高并发的情况下还能正常 ...

  4. 送给大家一个安卓版的easyradius短信提示客户端

    好像木有写博客了,送大家小软件,后期会适当更新 主要是方便一些用手机给用户发送到期短信的用户 下载地址: http://www.yss58.com/yss58

  5. Windows下修改Oracle默认的端口1521

    数据库最好不对公网开放,如果要开放,最好把默认端口改掉,防止一些针对 1521端口的入侵 1.找到 product\11.2.0\dbhome_1\NETWORK\ADMIN 下面的  listene ...

  6. 在 远程桌面 权限不足无法控制 UAC 提示时,可使用 计划任务 绕开系统的 UAC 提示

    就是记录一下,在远程的时候,很可能远程软件没有以管理员身份运行,或者其它原因,操作会被系统阻止,UAC 会进行提示,但是远程软件目前是无法操作的.(以下方法在 Windows 7 中测试通过) 可以通 ...

  7. MyEclipse设置编码方式

    1.windows->Preferences……打开"首选项"对话框,左侧导航树,导航到general->Workspace, 右侧Text file encoding ...

  8. 用Eclipse运行Android版APP(PhoneGap)时出现:Unable to execute dex: Multiple dex files define

    这两天遇到点小问题,做个记录: 症状:运行,调试时都报:Unable to execute dex: Multiple dex files define错误,发布后的APP安装到手机后一运行,就提示: ...

  9. PHP 中 Orientation 属性判断上传图片是否需要旋转(转)

    <?php $image = imagecreatefromstring(file_get_contents($_FILES['image_upload']['tmp_name'])); $ex ...

  10. WEB系统启动时加载Log4j的配置文件

    如何在系统启动的时候加载log4j的配置文件呢? 1.自定义监听类并且继承“ServletContextListener”接口: package cn.ibeans.common; import ja ...