码迷,mamicode.com
首页 > Web开发 > 详细

Web 上传图片加水印

时间:2017-01-06 12:57:56      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:cli   保存   onclick   ppa   创建   上传图片   开始   app   cte   

上传图片加水印 需要使用控件FileUpload 上传按钮Image控件展示上传的图片,页面中拖入三个控件

1  <form id="form1" runat="server">
2         <asp:FileUpload ID="FileUpload1" runat="server" accept=".jpg,.jpeg,.png" />
3         <asp:Button ID="Button1" runat="server" Text="上传" />
4         <asp:Image ID="Image1" runat="server"  />
5     </form>

JS端限制没有选择上传图片上传图片过大

 1 <script>
 2     document.getElementById("Button1").onclick = function () {
 3         var f = document.getElementById("FileUpload1");
 4         if (f.value.length <= 0)//没有选择上传的文件
 5         {
 6             alert("请选择上传的文件!");
 7             return false;
 8         }
 9         if (f.files[0].size > (1024 * 1024 * 10))//限制上传文件的大小10MB
10         {
11             alert("文件过大,不允许上传!");
12             return false;
13         }
14     };
15 </script>

选择图片 点击上传加水印上传显示在界面上 后代代码

 1 using System.Drawing;//绘画引用System.Drawing命名空间
 2 
 3 protected void Page_Load(object sender, EventArgs e)
 4     {
 5         Button1.Click+=Button1_Click;//上传按钮
 6     }
 7 
 8     void Button1_Click(object sender, EventArgs e)
 9     {
10         //2.创建System.Drawing.Image对象,使用FromStream方法需要System.IO对象
11         System.Drawing.Image img = System.Drawing.Image.FromStream(FileUpload1.FileContent);
12        //1.绘画用Graphics这个类,使用FromImage方法指向画布,需要System.Drawing.Image对象
13        Graphics g = Graphics.FromImage(img);
14        //4 创建s-绘制的内容 f-字体 b-画刷
15        string s = "www.baidu.com";
16        Font f = new Font("黑体", 80);
17        Brush b = new SolidBrush(Color.Red);
18        //3.绘制DrawString方法 s-绘制的内容 f-字体 b-画刷 从哪个位置开始画
19        g.DrawString(s, f, b, 150,700 );
20        //5保存img.Save 制作保存路径
21        string path = "Images/" + DateTime.Now.ToString("yyyyMMddhhssmm") + FileUpload1.FileName;
22        img.Save(Server.MapPath(path));
23         //页面展示图片
24        Image1.ImageUrl = path;    
25     }

 页面显示如下:

技术分享

 

Web 上传图片加水印

标签:cli   保存   onclick   ppa   创建   上传图片   开始   app   cte   

原文地址:http://www.cnblogs.com/fuze/p/6255627.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!