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

Question

Aryan Kumar · Answer

Sure, here are the steps on how to crop and save image using Jcrop.js in ASP.NET: Add the Jcrop.js library to your ASP.NET project.Create a view that will display the image and the Jcrop.js widget.In the view, use the Jcrop.js widget to crop the image.Save the cropped image to a file. Here is an example of the code: 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 · Answer

@{

ViewBag.Title = "Index";

Layout = "~/Views/Share/_Layouthome.cshtml";

}

$(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>

@if (!Request.Browser.IsMobileDevice)

{

<div class="modal fade" id="userpopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"

aria-hidden="true">

×</button>

User Profile Image</h4>

</div>

<div id="dialog-cropImage" class="container" title="Force LMS™" style="overflow: hidden;

height: 600px; width: 790px; background: black;">

</div>

</div>

</div>

</div>

}

else

{

<div class="modal fade" id="userpopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"

aria-hidden="true">

×</button>

User Profile Image</h4>

</div>

<div id="dialog-cropImage" class="container" title="Force LMS™" style="overflow: hidden;

background: black;">

</div>

</div>

</div>

</div>

}

<style>

img

{

max-width: 100%;

}

</style>

Anonymous User · Answer

Anonymous User · Answer

Anonymous User · Answer

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

forum

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

Can you answer this question?

5 Answers