locked
JCrop with Upload cannot find value RRS feed

  • 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