Create Fixed Size Cropper Using ASP.Net and jQuery

<p>
    <asp:Panel ID="pnlUpload" runat="server">
        <asp:FileUpload ID="Upload" runat="server" />
        <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" />
        <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:Panel>
    <asp:Panel ID="pnlCropped" runat="server" Visible="false">
        <asp:Image ID="imgCropped" runat="server" />
    </asp:Panel>
    <asp:Button ID="btnCrop" runat="server" Text="Crop" OnClick="btnCrop_Click" />
</p>

<script>
    $(window).load(function() {
        var jcrop_api;
        var i, ac;

        initJcrop();

        function initJcrop() {
            jcrop_api = $.Jcrop('#imgCrop', {
                onSelect: storeCoords,
                onChange: storeCoords
            });
            jcrop_api.setOptions({ aspectRatio: 1 / 1 });
            jcrop_api.setOptions({
                minSize: [250, 250],
                maxSize: [250, 350]
            });
            jcrop_api.setSelect([140, 180, 160, 180]);
        };

        function storeCoords(c) {
            jQuery('#X').val(c.x);
            jQuery('#Y').val(c.y);
            jQuery('#W').val(c.w);
            jQuery('#H').val(c.h);
        };
    });
</script>

bool FileOK = false;
bool FileSaved = false;

if (Upload.HasFile) {
    Session["UploadImage"] = Upload.FileName;
    string ExtensionofImage = Path.GetExtension(Session["UploadImage"].ToString()).ToLower();
    string[] allowed = { ".png", ".jpeg", ".jpg", ".gif" };
    for (int i = 0; i < allowed.Length; i++) {
        if (ExtensionofImage == allowed[i]) {
            FileOK = true;
        }
    }
}
if (FileOK) {
    try {
        Upload.PostedFile.SaveAs(path + Session["UploadImage"]);
        FileSaved = true;
    } catch (Exception ex) {
        lblError.Text = "Sorry Can't Upload" + ex.Message.ToString();
        lblError.Visible = true;
        FileSaved = false;
    }
} else {
    lblError.Text = "Select some Other Image";
    lblError.Visible = true;
}

if (FileSaved) {
    pnlUpload.Visible = false;
    pnlCrop.Visible = true;
    imgCrop.ImageUrl = "images/" + Session["UploadImage"].ToString();
}

This code will check the extension of the file if the extension is .png .jpeg, .jpg, or .gif if any file has an extension other than these extensions then the file will not be uploaded and it will throw an exception.

Step 4. Now we will do the code for the Crop Button.

string Img = Session["UploadImage"].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 = Cut(path + Img, w, h, x, y);
using (MemoryStream mem = new MemoryStream(CropImage, 0, CropImage.Length))
{
    mem.Write(CropImage, 0, CropImage.Length);
    using (SD.Image CroppedImage = SD.Image.FromStream(mem, true))
    {
        string SaveTo = path + "crop" + Img;
        CroppedImage.Save(SaveTo, CroppedImage.RawFormat);
        pnlCrop.Visible = false;
        pnlCropped.Visible = true;
        imgCropped.ImageUrl = "images/crop" + Img;
    }
}

This code will convert the coordinates into integers and then crop the image depending on these values.

static byte[] Cut(string Img, int Breadth, int Length, int X, int Y)
{
    try
    {
        using (SD.Image OriginalImage = SD.Image.FromFile(Img))
        {
            using (SD.Bitmap bmp = new SD.Bitmap(Breadth, Length))
            {
                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, Breadth, Length), X, Y, Breadth, Length, SD.GraphicsUnit.Pixel);
                    MemoryStream ms = new MemoryStream();
                    bmp.Save(ms, OriginalImage.RawFormat);
                    return ms.GetBuffer();
                }
            }
        }
    }
    catch (Exception Ex)
    {
        throw (Ex);
    }
}

This code will be added just after the Crop Button's code.

Output

First, this page will appear.

Now you need to choose a file and then click on the "Upload" button.

This will get the image to be cropped.

Now adjust the cropper and click on the Crop Button to crop it.