MIS王S

导航

c# + fileinput.js 图片上传与拼接

需求是这样的：

　　同时上传多张图片，然后将这些图片拼接为一张图片

前台代码：

　　

 1 <head runat="server">
 2     <title>多图片拼接</title>
 3     <link href="App_Themes/Mystyles/bootstrap.css" rel="stylesheet" type="text/css" />
 4     <link href="App_Themes/Mystyles/fileinput.css" rel="stylesheet" type="text/css" />
 5     <script src="Scripts/jquery-2.0.3.min.js" type="text/javascript"></script>
 6     <script src="Scripts/bootstrap.js" type="text/javascript"></script>
 7     <script src="Scripts/fileinput.js" type="text/javascript"></script>
 8     <script src="Scripts/fileinput_locale_zh.js" type="text/javascript"></script>
 9     <style type="text/css">
10         form
11         {
12             width: 60%;
13          }
14          .file-preview {
15             border-radius: 5px;
16             border: 1px solid #ddd;
17             padding: 5px;
18             width: 100%;
19             margin-bottom: 5px;
20         }
21     </style>
22 </head>
23 <body>
24     <center>
25         <h2>图片拼接</h2>
26         <form id="form1" runat="server">
27             <div class="form-group">
28                 <label for="file">请选择图片</label>
29                 <input id="file" type="file" multiple class="file" data-upload-url="Default.aspx"  data-overwrite-initial="false" data-min-file-count="2" runat="server"/>
30             </div>
31             <div class="form-group">
32                 <asp:Button ID="submitBtn" class="btn btn-primary" runat="server" Text="OK" />
33             </div>
34         </form>
35     </center>
36     
37 </body>
38 <script type="text/javascript">
39     $(document).ready(function () {
40         $("#file").fileinput({
41             'allowedFileExtensions' : ['jpg', 'png','gif'],
42             'overwriteInitial': false,
43             'showPreview': true,
44             'showUpload': false,
45             'maxFileSize': 1000,
46             'maxFilesNum': 10,
47             'allowedFileTypes': ['image', 'video', 'flash'],
48             slugCallback: function(filename) {
49                 return filename.replace('(', '_').replace(']', '_');
50         }
51         });
52     });
53 </script>
View Code

后台处理代码：

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Web.UI;
 6 using System.Drawing;
 7 
 8 public partial class _Default : System.Web.UI.Page
 9 {
10     protected void Page_Load(object sender, EventArgs e)
11     {
12         if(IsPostBack){
13             ListImage();
14         }
15     }
16 
17     #region 保存图片于imageList数组中
18     /// <summary>
19     /// 保存图片于imageList数组中
20     /// </summary>
21     protected void ListImage() {
22         List<Image> imageList = new List<Image>();//保存要拼接的图片
23         System.Web.HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
24         //string imageLocal = Server.MapPath(Request.ApplicationPath);
25        
26         Random ro = new Random();//定义一个获取随机数的对象
27         for (int i = 0; i < files.Count; i++)
28         {
29             System.Web.HttpPostedFile myFile = files[i];
30             string FileName = "";
31 
32             FileName = System.IO.Path.GetFileName(myFile.FileName);
33             string stro = ro.Next(100, 100000000).ToString();//产生一个随机数用于新命名的图片
34 
35             if (FileName.Length > 0)//有文件才执行上传操作再保存到数据库
36             {
37                 string path = Server.MapPath(Request.ApplicationPath) + DateTime.Now.ToString("yyyyMMdd-HHmmss") + "_" + stro + ".jpg";
38                 myFile.SaveAs(path);
39                 imageList.Add(System.Drawing.Image.FromFile(path));
40             }
41         }
42         imageSplice(imageList);
43         file.Dispose();//清空file的值
44     }
45     #endregion
46 
47     #region 图片拼接
48 
49     /// <summary>
50     /// 图片拼接
51     /// </summary>
52     /// <param name="imageList">图片数组</param>
53     /// <param name="imageLocal">拼接之后图片保存的位置</param>
54     protected void imageSplice(List<Image> imageList)
55     {
56         Random r = new Random();//定义一个获取随机数的对象
57         string n = r.Next(100, 100000000).ToString();//产生一个随机数用于新命名的图片
58         string imageLocal = Server.MapPath(Request.ApplicationPath) + "/images/" + n +".jpg";
59         int g = 0;//初始化图片高度
60 
61         //根据每张图片的高度，来确定拼接图片的最后高度
62         foreach (Image i in imageList)
63         {
64             g += i.Height;
65         }
66         int k = imageList.Max(x => x.Width);//拼接图片宽度取为要拼接图片的中最大的宽度
67 
68         Bitmap tableCharImage = new Bitmap(k, g);//构造一个宽k高g的位图
69         Graphics graph = Graphics.FromImage(tableCharImage);//以上面构造的空白图为基础创建一个新的画布
70         graph.DrawImage(tableCharImage, 0, 0);//在指定定的位置绘制制定的图像
71         graph.Clear(Color.White);//将画布背景设置为白色
72         int dk = 0;//初始化当前宽度
73         //多张图片居中拼接
74         foreach (System.Drawing.Image i in imageList)
75         {
76             //要绘制到画布上的图片没有画布宽
77             if(i.Width<k){
78                 int hk = (int)(k-i.Width)/2;
79                 graph.DrawImage(i, hk, dk, i.Width, i.Height);
80             }
81             //如果要绘制到画布上的图片宽度等于画布宽度就紧靠画布最左边开始绘图
82             else if(i.Width==k){
83                 graph.DrawImage(i, 0, dk, i.Width, i.Height);
84             }
85             dk += i.Width;
86         }
87         tableCharImage.Save(imageLocal);//保存到指定路径
88     }
89     #endregion
90     
91 }
View Code

效果图：

  (三张图片大小不一样)(三张图片大小一样)

 

posted on 2016-10-11 14:21  MIS王S  阅读(168)  评论(0)    收藏  举报