Blog

JCrop with Upload cannot find value [Answered]RSS

2 replies

Last post Mar 19, 2011 02:38 PM by Chrenner

‹ Previous Thread|Next Thread ›

Shortcuts

Chrenner

Member

28 Points

124 Posts

JCrop with Upload cannot find value

Mar 18, 2011 10:21 AM|Chrenner|LINK

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?

- Reply
Chrenner
Member

28 Points

124 Posts

Re: JCrop with Upload cannot find value

Mar 19, 2011 07:23 AM|Chrenner|LINK

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.

Chrenner

Member

28 Points

124 Posts

Re: JCrop with Upload cannot find value

Mar 19, 2011 02:38 PM|Chrenner|LINK

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

‹ Previous Thread|Next Thread ›