zoukankan      html  css  js  c++  java

  • Asp.net 裁剪图片(使用Jcrop，有Jcrop在IE下不起作用解决办法)

    近来做了个项目，需要上传一个图片，然后选择区域，裁剪做为头像

    使用的是Jcrop (官网为：http://deepliquid.com/content/Jcrop.html)，官网有示例。

    但是里面的Jquery的方法执行的时候在IE和非IE有不同的表现

    • 在非IE下，例如Chrome下，如下这样写是没问题的，但是在IE下(例如IE9)，却经常没有执行，反正问题是很奇怪
    View Code 
    1         jQuery(document).ready(function () {
2             jQuery('#imgCrop').Jcrop({
3                 aspectRatio: 1,
4                 onSelect: storeCoords
5             });
6         });
    • 在IE下，如下这样写，一定执行，但是Chrome下却不执行
    View Code 
    1         jQuery(document).ready(function () {
2             var api = $.Jcrop('#imgCrop', {
3                 aspectRatio: 1,
4                 onSelect: storeCoords
5             });
6         });
    • 所以我选了一个折冲的方案，就是手动执行这个Jquery

    我的代码如下

    前台页面j代码

    View Code 
     1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
 4     <title></title>
 5     <script src="js/jquery.min.js" type="text/javascript"></script>
 6     <script src="js/jquery.Jcrop.js" type="text/javascript"></script>
 7     <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
 8     <script type="text/javascript">
 9 //        jQuery(document).ready(function () {
10 //            jQuery('#imgCrop').Jcrop({
11 //                aspectRatio: 1,
12 //                onSelect: storeCoords
13 //            });
14 //        });
15 
16         function storeCoords(c) {
17             jQuery('#X').val(c.x);
18             jQuery('#Y').val(c.y);
19             jQuery('#W').val(c.w);
20             jQuery('#H').val(c.h);
21         }
22 
23         //为了能保证有执行到如下的代码，但又不至于每次移动鼠标都执行，所有做了如下恶心的操作
24         var isStart = 0;
25         function startCrop() {
26             if (isStart < 2) {
27                 jQuery('#imgCrop').Jcrop({
28                     aspectRatio: 1,
29                     onSelect: storeCoords
30                 });
31                 isStart++;
32             }
33         }
34     </script>
35 </head>
36 <body>
37     <form id="form1" runat="server">
38     <div onmousemove="startCrop()">
39         <asp:Panel ID="pnlUpload" runat="server">
40             <asp:FileUpload ID="Upload" runat="server" />
41             <br />
42             <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
43             <asp:Label ID="lblError" runat="server" Visible="false" />
44         </asp:Panel>
45         <asp:Panel ID="pnlCrop" runat="server" Visible="false">
46             <asp:Image ID="imgCrop" runat="server" />
47             <br />
48             <asp:HiddenField ID="X" runat="server" />
49             <asp:HiddenField ID="Y" runat="server" />
50             <asp:HiddenField ID="W" runat="server" />
51             <asp:HiddenField ID="H" runat="server" />
52             <asp:Button ID="btnCrop" runat="server" Text="Crop" OnClick="btnCrop_Click" />
53         </asp:Panel>
54         <asp:Panel ID="pnlCropped" runat="server" Visible="false">
55             <asp:Image ID="imgCropped" runat="server" />
56         </asp:Panel>
57     </div>
58     </form>
59 </body>
60 </html>

    后台代码

    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.Web.UI.WebControls;
  7 
  8 using System.IO;
  9 using SD = System.Drawing;
 10 using System.Drawing.Imaging;
 11 using System.Drawing.Drawing2D;
 12 
 13 
 14 namespace HeadProject
 15 {
 16     public partial class Index : System.Web.UI.Page
 17     {
 18         String path = HttpContext.Current.Request.PhysicalApplicationPath + "images\\";
 19 
 20         protected void Page_Load(object sender, EventArgs e)
 21         { 
 22 
 23         }
 24 
 25         protected void btnUpload_Click(object sender, EventArgs e)
 26         {
 27             Boolean FileOK = false;
 28             Boolean FileSaved = false;
 29 
 30             if (Upload.HasFile)
 31             {
 32                 Session["WorkingImage"] = Upload.FileName;
 33                 String FileExtension = Path.GetExtension(Session["WorkingImage"].ToString()).ToLower();
 34                 String[] allowedExtensions = { ".png", ".jpeg", ".jpg", ".gif" };
 35                 for (int i = 0; i < allowedExtensions.Length; i++)
 36                 {
 37                     if (FileExtension == allowedExtensions[i])
 38                     {
 39                         FileOK = true;
 40                     }
 41                 }
 42             }
 43 
 44             if (FileOK)
 45             {
 46                 try
 47                 {
 48                     Upload.PostedFile.SaveAs(path + Session["WorkingImage"]);
 49                     FileSaved = true;
 50                 }
 51                 catch (Exception ex)
 52                 {
 53                     lblError.Text = "File could not be uploaded." + ex.Message.ToString();
 54                     lblError.Visible = true;
 55                     FileSaved = false;
 56                 }
 57             }
 58             else
 59             {
 60                 lblError.Text = "Cannot accept files of this type.";
 61                 lblError.Visible = true;
 62             }
 63 
 64             if (FileSaved)
 65             {
 66                 pnlUpload.Visible = false;
 67                 pnlCrop.Visible = true;
 68                 imgCrop.ImageUrl = "images/" + Session["WorkingImage"].ToString();
 69             }
 70         }
 71 
 72         protected void btnCrop_Click(object sender, EventArgs e)
 73         {
 74             string ImageName = Session["WorkingImage"].ToString();
 75             int w = Convert.ToInt32(W.Value);
 76             int h = Convert.ToInt32(H.Value);
 77             int x = Convert.ToInt32(X.Value);
 78             int y = Convert.ToInt32(Y.Value);
 79 
 80             byte[] CropImage = Crop(path + ImageName, w, h, x, y);
 81             using (MemoryStream ms = new MemoryStream(CropImage, 0, CropImage.Length))
 82             {
 83                 ms.Write(CropImage, 0, CropImage.Length);
 84                 using (SD.Image CroppedImage = SD.Image.FromStream(ms, true))
 85                 {
 86                     string SaveTo = path + "crop" + ImageName;
 87                     CroppedImage.Save(SaveTo, CroppedImage.RawFormat);
 88                     pnlCrop.Visible = false;
 89                     pnlCropped.Visible = true;
 90                     imgCropped.ImageUrl = "images/crop" + ImageName;
 91                 }
 92             }
 93         }
 94 
 95         static byte[] Crop(string Img, int Width, int Height, int X, int Y)
 96         {
 97             try
 98             {
 99                 using (SD.Image OriginalImage = SD.Image.FromFile(Img))
100                 {
101                     using (SD.Bitmap bmp = new SD.Bitmap(Width, Height, OriginalImage.PixelFormat))
102                     {
103                         bmp.SetResolution(OriginalImage.HorizontalResolution, OriginalImage.VerticalResolution);
104                         using (SD.Graphics Graphic = SD.Graphics.FromImage(bmp))
105                         {
106                             Graphic.SmoothingMode = SmoothingMode.AntiAlias;
107                             Graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;
108                             Graphic.PixelOffsetMode = PixelOffsetMode.HighQuality;
109                             Graphic.DrawImage(OriginalImage, new SD.Rectangle(0, 0, Width, Height), X, Y, Width, Height, SD.GraphicsUnit.Pixel);
110                             MemoryStream ms = new MemoryStream();
111                             bmp.Save(ms, OriginalImage.RawFormat);
112                             return ms.GetBuffer();
113                         }
114                     }
115                 }
116             }
117             catch (Exception Ex)
118             {
119                 throw (Ex);
120             }
121         }
122     }
123 }
  • 相关阅读:
    用Photoshop制作一寸照片
    每天只问孩子这4句话，胜过百般疼爱
    机场也有打折季，你知道吗？请收好这份扫货指南
    这8个习惯会让孩子越来越笨，甚至抑郁！父母赶紧收手
    读后感该怎么写
    vue-cli 4058错误
    bootstrap img自适应
    移动端高清、多屏适配方案
    去掉页面滚动条
    js 404页面跳转
  • 原文地址：https://www.cnblogs.com/jiekk/p/2770331.html
Copyright © 2011-2022 走看看