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 }