縮略圖:比喻一張圖片寬度為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">0</label> 原圖高:<label id="oh">0</label> 原圖大小:<label id="os">0</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[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