---
title: "How to Crop And save Image Using Jcrop .js in asp.net"
description: "How to Crop And save Image Using Jcrop .js in asp.net"
author: "Anonymous User"
published: 2015-12-29
updated: 2023-07-03
canonical: https://www.mindstick.com/forum/33806/how-to-crop-and-save-image-using-jcrop-js-in-asp-dot-net
category: ".net"
tags: [".net", "jquery"]
reading_time: 7 minutes
---
# How to Crop And save Image Using Jcrop .js in asp.net
I want to use [Crop](https://answers.mindstick.com/qa/32258/under-whose-chairmanship-a-regional-project-on-climate-resilience-building-among-farmers-through-crop-residue-management-has-launched) And [save Image](https://www.mindstick.com/forum/439/save-image-in-sql-server) Using Jcrop .js in [asp.net](https://www.mindstick.com/articles/934/default-folders-available-inside-the-asp-dot-net-application-folder) How to do this please help me.
## Replies
### Reply by Aryan Kumar
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
```plaintext
@{
// 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
});
}
Crop Image
Crop Image
```
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.
### Reply by Anonymous User
@{ ViewBag.Title = "Index"; Layout = "~/Views/Share/_Layouthome.cshtml";}@if (!Request.Browser.IsMobileDevice){\
User Profile Image
}else{
User Profile Image
\
}\
### Reply by Anonymous User
```
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);
});
```
### Reply by Anonymous User
```
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Jcrop.aspx.cs" Inherits="Forumasp.Jcrop" %> <%--
```
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.
### Reply by Anonymous User
@{ ViewBag.Title = "Index"; Layout = "~/Views/Share/_Layouthome.cshtml";}@if (!Request.Browser.IsMobileDevice){\
}else{ \
}\
### Reply by Anonymous User
```
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);
});
```
### Reply by Anonymous User
```
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Jcrop.aspx.cs" Inherits="Forumasp.Jcrop" %> <%--