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
@{
// 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.
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) { }
We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
Privacy Policy.
Sure, here are the steps on how to crop and save image using Jcrop.js in ASP.NET:
Here is an example of the code:
HTML
This code will add the Jcrop.js library to your ASP.NET project. The
OnSelectfunction will be called when the user has finished cropping the image. TheOnSelectfunction will save the cropped image to a file.$('#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); });
I am using jcrop for crop image in asp.net . following below code