周末大放送网站图片上传，水印，预览，截图-白红宇

周末大放送网站图片上传，水印，预览，截图

阅读量：6242 次

发布时间：2019-06-22

本文共 10187 字，大约阅读时间需要 33 分钟。

周末闲着没事，将网站中经常用到的对图片的操作做了一个总结，方便以后回顾，这里将一天的成果，贴出来，希望能帮到大家。

首先是swfupload方式的无刷新上传，关于怎么配置，按照demo 的写法，我相信只要你不是太笨，都能成功。

关于swfupload你可以去网上下，也可以点这里下载：

项目结构：

上传代码：

前台上传页面，你可以根据需要建html页，也可以建webform。这里用一般处理程序来对照片进行处理，加水印，修改文件名等操作。

1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SWFUploadImage.aspx.cs" Inherits="Wolfy.ImageWeb.SWFUploadImage" %> 2  3  4  5  6  7      8     
       9     10     11     12     71 72 73     
      
       74         75         
       
        76 77             
        
         78                 
         
          79 80                     
          81 82                 
         
83 84                 
         
85 86                 
         87             
        
88         
       
89     
      
90 91

SWFUploadImage.aspx

1 using System; 2 using System.Collections.Generic; 3 using System.Drawing; 4 using System.IO; 5 using System.Linq; 6 using System.Web; 7  8 namespace Wolfy.ImageWeb 9 {10     /// 11     /// SWFUploadHandler 的摘要说明12     /// 
13     public class SWFUploadHandler : IHttpHandler14     {15 16         public void ProcessRequest(HttpContext context)17         {18             context.Response.ContentType = "text/plain";19             HttpPostedFile file = context.Request.Files["Filedata"];//获取上传的文件数据.20             string fileName = Path.GetFileName(file.FileName);//获取上传文件的名称.21             string fileExt = Path.GetExtension(fileName);//得到文件的扩展名.22 23             if (fileExt == ".jpg")24             {25                 //将上传的图片放到不同的文件夹下.(根据日期)26                 string dir = "/UploadImage/" + DateTime.Now.Year + "/" + DateTime.Now.Month + "/" + DateTime.Now.Day + "/";27                 Directory.CreateDirectory(Path.GetDirectoryName(context.Server.MapPath(dir)));//创建文件夹.28                 //文件重命名名字29                 string fullDir = dir + DateTime.Now.ToString("yyyyMMddhhmmss") + fileExt;//构建完整的文件路径.30                 file.SaveAs(context.Server.MapPath(fullDir));31                 context.Response.Write("ok:" + fullDir);32 33 34             }35         }36       37         public bool IsReusable38         {39             get40             {41                 return false;42             }43         }44     }45 }

SWFUploadHandler.ashx

预览和截图，水印代码(这里将他们整合在一个页面了，实在不想再建页面，在配置swfupload)，截图的时候，用到网上的一个jquery插件（可变层，可移动层）

1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CutPhoto.aspx.cs" Inherits="Wolfy.ImageWeb.CutPhoto1" %>  2   3   4   5       6     
        7       8       9      10      11      96  97  98     
      
        99 100         
       
        101 102             
        
         103                 
         
          104                     
          105                 
         
106 107                 
         
108 109             
        
110         
       
111         
       
        112             
        
113         
       
114         
       115         
       116         
       117         
       118 119     
      
120 121

CutPhoto.aspx

1 using System;  2 using System.Collections.Generic;  3 using System.Drawing;  4 using System.IO;  5 using System.Linq;  6 using System.Web;  7   8 namespace Wolfy.ImageWeb  9 { 10     ///  11     /// CutPhoto 的摘要说明 12     /// 
 13     public class CutPhoto : IHttpHandler 14     { 15  16         public void ProcessRequest(HttpContext context) 17         { 18             context.Response.ContentType = "text/plain"; 19             string action = context.Request["action"]; 20             if (action == "up") 21             { 22                 HttpPostedFile file = context.Request.Files["Filedata"];//获取上传的文件数据. 23                 string fileName = Path.GetFileName(file.FileName);//获取上传文件的名称. 24                 string fileExt = Path.GetExtension(fileName);//得到文件的扩展名. 25  26                 if (fileExt == ".jpg") 27                 { 28                     using (Image img = Image.FromStream(file.InputStream))//根据上传的图片创建一个Image,获取图片的高度与宽度. 29                     { 30  31                         file.SaveAs(context.Server.MapPath("/UploadImage/" + fileName));//把图片保存起来。 32                         context.Response.Write("ok:/UploadImage/" + fileName + ":" + img.Width + ":" + img.Height);//将图片路径与图片的高度与宽度返回浏览器 33                     } 34                 } 35             } 36             else if (action == "cut")//图片截取. 37             { 38  39                 //1接收参数. 40                 int x = Convert.ToInt32(context.Request.Form["x"]); 41                 int y = Convert.ToInt32(context.Request.Form["y"]); 42                 int width = Convert.ToInt32(context.Request.Form["width"]); 43                 int height = Convert.ToInt32(context.Request.Form["height"]); 44                 string imgSrc = context.Request.Form["imgSrc"]; 45                 //2:创建画布 46                 using (Bitmap map = new Bitmap(width, height))//将红色DIV确定范围画到画布上 47                 { 48                     //3;画笔 49                     using (Graphics g = Graphics.FromImage(map)) 50                     { 51                         //4:用画笔将图片画到画布上 52                         using (Image img = Image.FromFile(context.Server.MapPath(imgSrc))) 53                         { 54                             //1:指定的是对哪张图片进行操作. 55                             //2:指定画多么大。 56                             //3:画img的哪一部分. 57                             g.DrawImage(img, new Rectangle(0, 0, width, height), new Rectangle(x, y, width, height), GraphicsUnit.Pixel); 58                             string newfileName = Guid.NewGuid().ToString().Substring(0, 8); 59                             map.Save(context.Server.MapPath("/UploadImage/" + newfileName + ".jpg"));//保存截取后的图片. 60                             context.Response.Write("/UploadImage/" + newfileName + ".jpg"); 61                         } 62  63                     } 64  65                 } 66             } 67             else if (action == "water") 68             { 69                 string imgSrc = context.Request.Form["imgSrc"]; 70                 //将照片作为画板 71                 using (Image img = Image.FromFile(context.Server.MapPath(imgSrc))) 72                 { 73                     //3;画笔 74                     using (Graphics g = Graphics.FromImage(img)) 75                     { 76                         //4:用画笔将字符串画到画布上 77                         //1:指定的是对哪张图片进行操作. 78                         //2:指定画多么大。 79                         //3:画img的哪一部分. 80                         g.DrawString("http://www.wolfy.com",new Font("华文行楷",30),new SolidBrush(Color.Red), new Rectangle(0, 0, img.Width, img.Height)); 81                         string newfileName = Guid.NewGuid().ToString().Substring(0, 8); 82                         img.Save(context.Server.MapPath("/UploadImage/" + newfileName + ".jpg"));//保存水印后的图片. 83                         context.Response.Write("/UploadImage/" + newfileName + ".jpg"); 84                     } 85                 } 86                 // 87                 // 88                 //{ 89                 //    //4:用画笔将图片画到画布上 90  91                 //    { 92                 //        //1:指定的是对哪张图片进行操作. 93                 //        //2:指定画多么大。 94                 //        //3:画img的哪一部分. 95                 //        g.DrawImage(img, new Rectangle(0, 0, width, height), new Rectangle(x, y, width, height), GraphicsUnit.Pixel); 96                 //        string newfileName = Guid.NewGuid().ToString().Substring(0, 8); 97                 //        map.Save(context.Server.MapPath("/UploadImage/" + newfileName + ".jpg"));//保存截取后的图片. 98                 //        context.Response.Write("/UploadImage/" + newfileName + ".jpg"); 99 100 101 102             }103         }104 105         public bool IsReusable106         {107             get108             {109                 return false;110             }111         }112     }113 }

CutPhoto.ashx

其实对照片的操作还有生成缩略图，我想着图片上传后，就是对照片按比例缩放，这里就不再赘述了。其实在总结的时候，遇到最让人DT的就是uploadify这个上传插件，也不知道什么地方设置错了，能上传成功，但就是不能触发事件，这里也将代码贴出来，有知道的大神，一定告诉我，这代码很折腾人啊。

这可能也是我选择swfupload放弃uploadify的原因，不能触发上传成功的事件，获取不到上传成功的图片的路径。

解决方案：

代码：

1 2 3 4 5

6 7

8 9

10 43 44 45

47 48

49 最多一次上传10张图片

50 上传重置上传队列51

52 53

56 57

一般处理程序代码：

1 using System; 2 using System.Collections.Generic; 3 using System.IO; 4 using System.Linq; 5 using System.Web; 6  7  8 namespace UploadifyAndWatermark.uploadify 9 {10     /// 11     /// Uploadify 的摘要说明12     /// 
13     public class Uploadify : IHttpHandler14     {15 16         public void ProcessRequest(HttpContext context)17         {18             context.Response.ContentType = "text/plain";19             context.Response.Charset = "utf-8";20             //接收上传的文件21             HttpPostedFile file = context.Request.Files["Filedata"];22 23             if (file != null)24             {25                 string fileName = Path.GetFileName(file.FileName);//获取上传文件的名称.26                 string fileExt = Path.GetExtension(fileName);//得到文件的扩展名.27 28                 //将上传的图片放到不同的文件夹下.(根据日期)29                 string dir = "/UploadImage/" + DateTime.Now.Year + "/" + DateTime.Now.Month + "/" + DateTime.Now.Day + "/";30                 Directory.CreateDirectory(Path.GetDirectoryName(context.Server.MapPath(dir)));//创建文件夹.31                 //文件重命名名字 用当前时间作为新名字 保存在相应的日期文件夹下32                 string fullDir = dir + DateTime.Now.ToString("yyyyMMddhhmmss") + fileExt;//构建完整的文件路径.33                 //保存图片34                 file.SaveAs(context.Server.MapPath(fullDir));35                 //将图片的路径返回context.Resopnse.Write(fullDir);36                 context.Response.Write("1");37                38             }39             else40             {41                 context.Response.Write("0");42             }43 44         }45 46 47         public bool IsReusable48         {49             get50             {51                 return false;52             }53         }54     }55 }

这里将代码展开，方便看到的大神，知道什么原因的，不要吝啬你的一点点点点时间，拯救一下我这个为代码疯狂的小白，不胜感激！

问题：在uploadify上传成功后，为什么不触发oncompelete事件？

是否上传成功后的路径可以 context.Response.Write(路径);在oncompelete事件参数中response能获取到该路径？

Demo下载：

uploadify照片上传

swfuploadify照片上传，预览，截图，水印

转载于:https://www.cnblogs.com/wolf-sun/p/3266151.html

你可能感兴趣的文章