Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

home / developersection / forums / how to crop and save image using jcrop .js in asp.net
Ask Question

How to Crop And save Image Using Jcrop .js in asp.net

Anonymous User 4843 29 Dec 2015
I want to use  Crop And save Image Using Jcrop .js in asp.net How to do this please help me.
.net .netjquery
Updated 03 Jul 2023
Anonymous User
Anonymous User

Other

I am a content writter !

Message

5 Answers

Aryan Kumar
Aryan Kumar 03 Jul 2023
Report Abuse

Sure, here are the steps on how to crop and save image using Jcrop.js in ASP.NET:

  1. Add the Jcrop.js library to your ASP.NET project.
  2. Create a view that will display the image and the Jcrop.js widget.
  3. In the view, use the Jcrop.js widget to crop the image.
  4. Save the cropped image to a file.

Here is an example of the code:

HTML

@{
    // Get the image to crop
    var image = Image.FromFile("image.jpg");

    // Create the Jcrop.js widget
    var jcrop = new Jcrop("#image", {
        aspectRatio: 1,
        onSelect: OnSelect
    });
}

<html>
<head>
    <title>Crop Image</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jcrop/2.0.3/js/jquery.Jcrop.min.js"></script>
</head>
<body>
    <h1>Crop Image</h1>

    <img id="image" src="image.jpg" />

    <script>
    function OnSelect(coords) {
        // Save the cropped image to a file
        var croppedImage = image.Crop(coords);
        croppedImage.Save("cropped_image.jpg");
    }
    </script>
</body>
</html>

This code will add the Jcrop.js library to your ASP.NET project. The OnSelect function will be called when the user has finished cropping the image. The OnSelect function will save the cropped image to a file.

Anonymous User
Anonymous User 30 Dec 2015
Report Abuse
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Share/_Layouthome.cshtml";
}
<link href="/Content/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="/Content/bootstrap-theme.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-2.1.4.js" type="text/javascript"></script>
<script src="/Scripts/bootstrap.js" type="text/javascript"></script>
<script src="/Scripts/jquery.Jcrop.min.js" type="text/javascript"></script>
<link href="/Content/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" />
<script>
    $(function () {
        var jcrop_api;
        var canvas;
        function initCrop(width, height) {
            $('#imgUser').Jcrop({
                onChange: updatePreview,
                onSelect: updatePreview,
                trueSize: [width, height],
                aspectRatio: 1,
                bgColor: '',
                bgOpacity: .4
            }, function () {
                jcrop_api = this;
                jcrop_api.animateTo([100, 100, 400, 400]);
            });

        }
        function updatePreview(c) {
            if (parseInt(c.w) > 0) {
                var imageObj = $("#imgUser")[0];
                canvas = $("#preview")[0];
                var context = canvas.getContext("2d");
                context.clearRect(0, 0, canvas.width, canvas.height);
                context.restore();
                context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, canvas.width, canvas.height);
                $('#imgCropped').val(canvas.toDataURL());
            }

        }

        var cropDiag;
        $("input[name='userimage']").change(function (event) {
            //var mb = $('#imagedata').html();
            //$(".modal-body").html(mb);
            //$('#dialog-cropImage').html("");
            $('#userpopup').modal({
                backdrop: 'static'
            }, 'show');
            $('#imgUser').removeAttr('src', '');
            showImage(this, $('#imgUser'));
        });



        $('#imgUser').load(function () {
            debugger;
            $('#userpopup').fadeIn(500);

            var imgwidth = $('#imgUser').width();
            var imgheight = $('#imgUser').height();
            var imgval = imgwidth / imgheight;
            var diagWidth = $("#dialog-cropImage").width();
            if (imgval > 1) {
                var ratio = diagWidth / imgwidth;
                $('#imgUser').width(imgwidth * ratio);
                $('#imgUser').height(imgheight * ratio);
                $('#dialog-cropImage').height((imgheight * ratio));
            }
            else {
                var ratio = $("#dialog-cropImage").height() / imgheight;
                $('#imgUser').width(imgwidth * ratio);
                $('#imgUser').height(imgheight * ratio);
                $('#dialog-cropImage').css('max-width', (imgwidth * ratio) + 32);
                $('.modal-content').width((diagWidth + 30));
                $('#dialog-cropImage').height((imgheight * ratio));
            }
            initCrop(this.naturalWidth, this.naturalHeight);
        });

        function showImage(input, imageInput, width, height) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $(imageInput)
                            .attr('src', e.target.result)
                            .width(width)
                            .height(height);
                };
                reader.readAsDataURL(input.files[0]);
            }
        }
    });
</script>
<input type="file" name="userimage" size="5">
@if (!Request.Browser.IsMobileDevice)
{

    <div class="modal fade" id="userpopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="overflow: hidden; width: 820px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" id="Close-cropbox" aria-hidden="true">
                        &times;</button>
                    <h4 class="modal-title">
                        User Profile Image</h4>
                </div>
                <div class="modal-body">
                    <div id="dialog-cropImage" class="container" title="Force LMS&trade;" style="overflow: hidden;
                        height: 600px; width: 790px; background: black;">
                        <img id="imgUser" alt="Crop Image" style="border: none;" />
                        <canvas id="preview" width="300" height="300" style="overflow: hidden; visibility: hidden;"></canvas>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="button" id="btnCrop" value="Ok" />
                    <input type="button" id="btncancel" value="Cancel" />
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
}
else
{
    <div class="modal fade" id="userpopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="overflow: hidden;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" id="Close-cropbox" aria-hidden="true">
                        &times;</button>
                    <h4 class="modal-title">
                        User Profile Image</h4>
                </div>
                <div class="modal-body">
                    <div id="dialog-cropImage" class="container" title="Force LMS&trade;" style="overflow: hidden;
                        background: black;">
                        <img id="imgUser" alt="Crop Image" style="border: none;" />
                        <canvas id="preview" width="300" height="300" style="overflow: hidden; visibility: hidden;"></canvas>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="button" id="btnCrop" value="Ok" />
                    <input type="button" id="btncancel" value="Cancel" />
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

}
<style>
    img
    {
        max-width: 100%;
    }
</style>

Anonymous User
Anonymous User 30 Dec 2015
Report Abuse 
For Image Resize
 $('#imgUser').load(function () {
            debugger;
            $('#userpopup').fadeIn(500);
            var imgwidth = $('#imgUser').width();
            var imgheight = $('#imgUser').height();
            var imgval = imgwidth / imgheight;
            var diagWidth = $("#dialog-cropImage").width();
            if (imgval > 1) {
                var ratio = diagWidth / imgwidth;
                $('#imgUser').width(imgwidth * ratio);
                $('#imgUser').height(imgheight * ratio);
                $('#dialog-cropImage').height((imgheight * ratio));
            }
            else {
                var ratio = $("#dialog-cropImage").height() / imgheight;
                $('#imgUser').width(imgwidth * ratio);
                $('#imgUser').height(imgheight * ratio);
                $('#dialog-cropImage').css('max-width', (imgwidth * ratio) + 32);
            }
            initCrop(this.naturalWidth, this.naturalHeight);
        });
Anonymous User
Anonymous User 30 Dec 2015
Report Abuse 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Jcrop.aspx.cs" Inherits="Forumasp.Jcrop" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <script src="Scripts/jquery-2.1.4.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <link href="Content/bootstrap-theme.css" rel="stylesheet" />
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <link href="CroupImage/jquery.Jcrop.css" rel="stylesheet" />
    <script src="CroupImage/jquery.Jcrop.js"></script>
    <script>
        $(function () {
            var jcrop_api;
            var canvas;
            function initCrop(width, height) {             
                $('#imgUser').Jcrop({
                    onChange: updatePreview,
                    onSelect: updatePreview,
                    trueSize: [width, height],
                    aspectRatio: 1,
                    bgColor: '',
                    bgOpacity: .4
                }, function () {
                    jcrop_api = this;
                    jcrop_api.animateTo([100, 100, 400, 400]);
                });
            }
            function updatePreview(c) {
                if (parseInt(c.w) > 0) {
                    var imageObj = $("#imgUser")[0];
                    canvas = $("#preview")[0];
                    var context = canvas.getContext("2d");
                    context.clearRect(0, 0, canvas.width, canvas.height);
                    context.restore();
                    context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, canvas.width, canvas.height);
                    $('#imgCropped').val(canvas.toDataURL());
                }
            }
            var cropDiag;
            $("input[name='userimage']").change(function (event) {
                //var mb = $('#imagedata').html();
                //$(".modal-body").html(mb);
                //$('#dialog-cropImage').html("");
                $('#userpopup').modal({
                    backdrop: 'static'
                }, 'show');
                $('#imgUser').removeAttr('src', '');
                showImage(this, $('#imgUser'));
            });
            //$('#btnCrop').click(function () {
            //    $('#frmUserDetails').submit();
            //    jcrop_api.destroy();
            //});
            //$('#btncancel, #Close-cropbox').click(function () {
            //    $('input:file').val("");
            //    jcrop_api.destroy();
            //    jcrop_api = null;
            //    $('#dialog-cropImage').modal('hide');
            //});
          
            $('#imgUser').load(function () {
                debugger;               
                var imgwidth = $('#imgUser').width();
                var imgheight = $('#imgUser').height();
                var imgval = imgwidth / imgheight;
                var diagWidth = $("#dialog-cropImage").width();
                if (imgval > 1) {
                    var ratio = diagWidth / imgwidth;
                    $('#imgUser').width(imgwidth * ratio);
                    $('#imgUser').height(imgheight * ratio);
                    $('#dialog-cropImage').height((imgheight * ratio));
                }
                else {
                    var ratio = $("#dialog-cropImage").height() / imgheight;
                    $('#imgUser').width(imgwidth * ratio);
                    $('#imgUser').height(imgheight * ratio);
                    $('#dialog-cropImage').css('max-width', (imgwidth * ratio) + 32);
                }
                initCrop(this.naturalWidth, this.naturalHeight);
            });
            function showImage(input, imageInput, width, height) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $(imageInput)
                            .attr('src', e.target.result)
                            .width(width)
                            .height(height);
                    };
                    reader.readAsDataURL(input.files[0]);
                }
            }
        });
    </script>
</head>
<body>
    <input type="file" name="userimage" size="5">
    <%--<div style="padding: 10px; background: #f00;width: 810px;"  id="imagedata">
        <div id="dialog-cropImage" class="container" title="Force LMS&trade;" style="overflow: hidden; height: 600px; width: 790px; background: black;">
            <img id="imgUser" alt="Crop Image" style="border: none;" />
            <canvas id="preview" width="300" height="300" style="overflow: hidden; visibility: hidden;"></canvas>
        </div>
    </div>--%>

    <div class="modal fade" id="userpopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="overflow: hidden; width: 820px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" id="Close-cropbox" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">User Profile Image</h4>
                </div>
                <div class="modal-body">
                    <div id="dialog-cropImage" class="container" title="Force LMS&trade;" style="overflow: hidden; height: 600px; width: 790px; background: black;">
                        <img id="imgUser" alt="Crop Image" style="border: none;" />
                        <canvas id="preview" width="300" height="300" style="overflow: hidden; visibility: hidden;"></canvas>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="button" id="btnCrop" value="Ok" />
                    <input type="button" id="btncancel" value="Cancel" />
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <style>
        img {
            max-width: 100%;
        }
    </style>
</body>
</html>
Anonymous User
Anonymous User 29 Dec 2015
Report Abuse

I am using jcrop for crop image in asp.net . following below code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImageCrop.aspx.cs" Inherits="Forumasp.CroupImage.ImageCroup" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Crop Image using crop plugin</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="jquery.Jcrop.js" type="text/javascript"></script>
    <link href="jquery.Jcrop.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
        <script type="text/javascript">
            $(function () {
                $('#FileUpload1').change(function () {
                    $('#Image1').hide();
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $('#Image1').show();
                        $('#Image1').attr("src", e.target.result);
                        $('#Image1').Jcrop({
                            onChange: SetCoordinates,
                            onSelect: SetCoordinates
                        });
                    }
                    reader.readAsDataURL($(this)[0].files[0]);
                });
                $('#btnCrop').click(function () {
                    var x1 = $('#imgX1').val();
                    var y1 = $('#imgY1').val();
                    var width = $('#imgWidth').val();
                    var height = $('#imgHeight').val();
                    var canvas = $("#canvas")[0];
                    $('#btnCrop').hide();
                    $('.jcrop-holder').css("display", "none");
                    var context = canvas.getContext('2d');
                    var img = new Image();
                    img.onload = function () {
                        canvas.height = height;
                        canvas.width = width;
                        context.drawImage(img, x1, y1, width, height, 0, 0, width, height);
                        $('#imgCropped').val(canvas.toDataURL());
                        $('#btnUpload').show();

                    };
                    img.src = $('#Image1').attr("src");
                });
            });
            function SetCoordinates(c) {
                $('#imgX1').val(c.x);
                $('#imgY1').val(c.y);
                $('#imgWidth').val(c.w);
                $('#imgHeight').val(c.h);
                $('#btnCrop').show();
            };
        </script>
        <input type="file" id="FileUpload1" accept=".jpg,.png,.gif" />
        <br />
        <br />
        <table border="0" cellpadding="0" cellspacing="5">
            <tr>
                <td>
                    <img id="Image1" src="" alt="" style="display: none" />
                </td>
                <td>
                    <canvas id="canvas" height="5" width="5"></canvas>
                </td>
            </tr>
        </table>
        <br />
        <input type="button" id="btnCrop" value="Crop" style="display: none" />
        <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="Upload" Style="display: none" />
        <input type="hidden" name="imgX1" id="imgX1" />
        <input type="hidden" name="imgY1" id="imgY1" />
        <input type="hidden" name="imgWidth" id="imgWidth" />
        <input type="hidden" name="imgHeight" id="imgHeight" />
        <input type="hidden" name="imgCropped" id="imgCropped" />
    </form>
</body>
</html>
using System;
using System.Drawing;
using System.IO;
using Image = System.Drawing.Image;
namespace Forumasp.CroupImage
{
    public partial class ImageCroup : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }
        protected void Upload(object sender, EventArgs e)
        {
            try
            {
                string base64 = Request.Form["imgCropped"];
                byte[] bytes = Convert.FromBase64String(base64.Split(',')[1]);
                using (System.IO.FileStream stream = new System.IO.FileStream(Server.MapPath("~/Images/Cropped.png"), System.IO.FileMode.Create))
                {
                    stream.Write(bytes, 0, bytes.Length);
                    stream.Flush();
                }
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }
    }
}
advertising