Answered by:
JCrop with Upload cannot find value

Question
-
User-1601837296 posted
Hi.
I am having an issue with my attempt to upload, crop an image and then save it. At first i upload and it works like it should but for some reason it does not add the cropper (the square you use to crop the image with) and if i simply press the Crop button it tells me that the inputstring is not in correct format.
I use a masterpage and because of this i had to add <%= X.ClientID %> as far as i could read from other peoples issues with finding values.
Top of my .aspx page:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server"> <script src="js/jquery-1.5.1.js" type="text/javascript"></script> <link href="css/jquery.Jcrop.css" rel="stylesheet" type="text/css" /> <script src="js/jquery.Jcrop.js" type="text/javascript"></script> <script src="js/jquery.Jcrop.min.js" type="text/javascript"></script> <script src="js/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#imgCrop').Jcrop({ onSelect: storeCoords }); }); function storeCoords(c) { jQuery('<%= X.ClientID %>').val(c.x); jQuery('<%= Y.ClientID %>').val(c.y); jQuery('<%= W.ClientID %>').val(c.w); jQuery('<%= H.ClientID %>').val(c.h); }; </script> </asp:Content>
Here's my .aspx page:
<asp:Panel ID="pnlUpload" runat="server"> <asp:FileUpload ID="Upload" runat="server" /> <br /> <asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" Text="Upload" /> <asp:Label ID="lblError" runat="server" Visible="false" /> </asp:Panel> <asp:Panel ID="pnlCrop" runat="server" Visible="false"> <asp:Image ID="imgCrop" runat="server" /> <br /> <asp:HiddenField ID="X" runat="server" /> <asp:HiddenField ID="Y" runat="server" /> <asp:HiddenField ID="W" runat="server" /> <asp:HiddenField ID="H" runat="server" /> <asp:Button ID="btnCrop" runat="server" Text="Crop" OnClick="btnCrop_Click" /> </asp:Panel> <asp:Panel ID="pnlCropped" runat="server" Visible="false"> <asp:Image ID="imgCropped" runat="server" /> </asp:Panel>
And here's my .cs page:
using System; using System.Collections; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; using System.IO; using SD = System.Drawing; using System.Drawing.Imaging; using System.Drawing.Drawing2D; using DatingTableAdapters; using System.Text; public partial class CreatePicture : System.Web.UI.Page { String path = HttpContext.Current.Request.PhysicalApplicationPath + "User\\pictemp\\"; protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { } else { } } protected void btnUpload_Click(object sender, EventArgs e) { Boolean FileOK = false; Boolean FileSaved = false; if (Upload.HasFile) { Session["WorkingImage"] = Upload.FileName; String FileExtension = Path.GetExtension(Session["WorkingImage"].ToString()).ToLower(); String[] allowedExtensions = { ".png", ".jpeg", ".jpg", ".gif" }; for (int i = 0; i < allowedExtensions.Length; i++) { if (FileExtension == allowedExtensions[i]) { FileOK = true; } } } if (FileOK) { try { Upload.PostedFile.SaveAs(path + Session["WorkingImage"]); FileSaved = true; } catch (Exception ex) { lblError.Text = "File could not be uploaded." + ex.Message.ToString(); lblError.Visible = true; FileSaved = false; } } else { lblError.Text = "Cannot accept files of this type."; lblError.Visible = true; } if (FileSaved) { pnlPicture.Visible = false; pnlUpload.Visible = false; pnlCrop.Visible = true; imgCrop.ImageUrl = "pictemp/" + Session["WorkingImage"].ToString(); } } protected void btnCrop_Click(object sender, EventArgs e) { string ImageName = Session["WorkingImage"].ToString(); int w = Convert.ToInt32(W.Value); int h = Convert.ToInt32(H.Value); int x = Convert.ToInt32(X.Value); int y = Convert.ToInt32(Y.Value); byte[] CropImage = Crop(path + ImageName, w, h, x, y); using (MemoryStream ms = new MemoryStream(CropImage, 0, CropImage.Length)) { ms.Write(CropImage, 0, CropImage.Length); using (SD.Image CroppedImage = SD.Image.FromStream(ms, true)) { string SaveTo = path + "crop" + ImageName; CroppedImage.Save(SaveTo, CroppedImage.RawFormat); pnlCrop.Visible = false; pnlCropped.Visible = true; imgCropped.ImageUrl = "pictures/crop" + ImageName; } } } static byte[] Crop(string Img, int Width, int Height, int X, int Y) { try { using (SD.Image OriginalImage = SD.Image.FromFile(Img)) { using (SD.Bitmap bmp = new SD.Bitmap(Width, Height)) { bmp.SetResolution(OriginalImage.HorizontalResolution, OriginalImage.VerticalResolution); using (SD.Graphics Graphic = SD.Graphics.FromImage(bmp)) { Graphic.SmoothingMode = SmoothingMode.AntiAlias; Graphic.InterpolationMode = InterpolationMode.HighQualityBicubic; Graphic.PixelOffsetMode = PixelOffsetMode.HighQuality; Graphic.DrawImage(OriginalImage, new SD.Rectangle(0, 0, Width, Height), X, Y, Width, Height, SD.GraphicsUnit.Pixel); MemoryStream ms = new MemoryStream(); bmp.Save(ms, OriginalImage.RawFormat); return ms.GetBuffer(); } } } } catch (Exception Ex) { throw (Ex); } }
I am pretty lost at this point since everything looks right to me, but hopefully you can see if i've made a mistake somewhere?
Friday, March 18, 2011 10:21 AM
Answers
-
User-1601837296 posted
I figured it out. My script was not setup properly to retrieve the values and the image. This is the correct way:
<script type="text/javascript"> jQuery(document).ready(function() { jQuery('#<%=imgCrop.ClientID%>').Jcrop({ boxWidth: 300, onSelect: storeCoords, minSize: [200, 200], maxSize: [200, 200] }); }); function storeCoords(c) { jQuery('#<%=X.ClientID%>').val(c.x); jQuery('#<%=Y.ClientID%>').val(c.y); jQuery('#<%=W.ClientID%>').val(c.w); jQuery('#<%=H.ClientID%>').val(c.h); }; </script>
I had forgotten to use the #<%=X.ClientID%> on the image as well and forgot to add the # in front of the code of the 4 values
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Saturday, March 19, 2011 2:38 PM
All replies
-
User-1601837296 posted
Bump. :( Im not even sure why the admins put this under this category since im pretty sure it's a javascript issue.. but anyhows i hope there's still someone who sees this and can help.
Saturday, March 19, 2011 7:23 AM -
User-1601837296 posted
I figured it out. My script was not setup properly to retrieve the values and the image. This is the correct way:
<script type="text/javascript"> jQuery(document).ready(function() { jQuery('#<%=imgCrop.ClientID%>').Jcrop({ boxWidth: 300, onSelect: storeCoords, minSize: [200, 200], maxSize: [200, 200] }); }); function storeCoords(c) { jQuery('#<%=X.ClientID%>').val(c.x); jQuery('#<%=Y.ClientID%>').val(c.y); jQuery('#<%=W.ClientID%>').val(c.w); jQuery('#<%=H.ClientID%>').val(c.h); }; </script>
I had forgotten to use the #<%=X.ClientID%> on the image as well and forgot to add the # in front of the code of the 4 values
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Saturday, March 19, 2011 2:38 PM