NET生成缩略图并下载

缩略图:比喻一张图片宽度为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" οnchange="javascript:fileInfo();" />
        <p style="font-size:12px;">原图宽:<label id="ow">0</label>&nbsp;原图高:<label id="oh">0</label>&nbsp;
            原图大小:<label id="os">0</label>KB</p>
      <p>设置宽度:<input type="text" name="width" style="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[0];
         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 / 1024);
                 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[0];
            //获取文件名
            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, 0, 0, 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