Hari Malla: Image Crop,Resize,Rotate and Saving ?

Image Crop,Resize,Rotate and Saving ?

lightweightDemo.ASPX:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="lightweightDemo.aspx.cs" Inherits="lightweightDemo" %>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Image Cropping Demo</title>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="src/jquery.cropbox.css" rel="stylesheet" type="text/css">
<style type="text/css">
div.cropbox .btn-file {
position: relative;
overflow: hidden;
}

div.cropbox .btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}

div.cropbox .cropped {
margin-top: 10px;
}

.syntaxhighlighter table .container:before {
display: none !important;
}

footer {
margin-top: 10px;
border-top: #cdcdcd 1px solid;
}

.container {
margin: 150px auto 30px auto;
}
/*.cropselector{
left:10px;
top:10px

}
.frame-cropbox {
left: 50px;
top: 50px
}*/
#cropselector {
ruby-position: inline;
position: absolute;
display: block;
width: 200px;
height: 250px;
overflow: auto;
left: 0px;
top: 0px;
/*hide "crop" overflowing parts of images*/
border: 1px solid #000;
border-color: red;
}
</style>
</head>

<body>
<form id="form1" runat="server">

<div class="container">
<h1>jQuery Image Cropping Demo</h1>
<br />
<br />
<div id="message" class="alert alert-info"></div>
<div id="plugin" class="cropbox">
<div class="workarea-cropbox">
<div class="bg-cropbox" style="border-radius: 10px;">
<img id="mainImage" class="image-cropbox" />
<div class="cropArea" id="area"></div>
<%-- class="membrane-cropbox"--%>
</div>
<div class="frame-cropbox" id="cropselector">
<div class="resize-cropbox"></div>
</div>
</div>
<div class="btn-group">
<span class="btn btn-primary btn-file"><i class="glyphicon glyphicon-folder-open"></i>
  Browse
<input type="file" id="selectfiles" runat="server" accept="image/*">
<input type="text" id="filename" runat="server" style="display: none" />
</span>
<button type="button" id="btnselect" class="btn btn-success btn-select"> Selector </button>
<button type="button" id="btncrop" class="btn btn-success btn-crop"><i class="glyphicon glyphicon-scissors"></i> Crop </button>
<button type="button" id="btnResize" class="btn btn-info alert-danger"><i class="glyphicon glyphicon-resize"></i>  Resize</button>

<button type="button" id="btnReset" class="btn btn-warning btn-reset"><i class="glyphicon glyphicon-refresh"></i> Reset </button>
<button type="button" id="btnRotate" style="display: none;" class="btn btn-info active"><i class="glyphicon glyphicon-repeat"></i> Rotate </button>

</div>
<br />
<br />
<div id="dialog">
<span class="close">×</span>
<input type="text" id="txtx" runat="server" placeholder="Height" onchange="return isNumber(e);" />
<input type="text" id="txty" runat="server" placeholder="Width" />
<asp:Button ID="btnSaveResize" class="btn btn-info arrow" runat="server" OnClick="btnSaveResize_Click" Text="Save Resize" />

</div>

<div class="cropped panel panel-default" id="imageresult" style="border-radius: 10px; width: 600px;">
<div class="panel-heading">
<h3 class="panel-title">Result of cropping</h3>
</div>
<div id="crpimg" class="panel-body">...</div>
</div>
<div class="form-group" style="display: none">
<label>Info of cropping</label>
<textarea id="imgCrop" runat="server" class="data form-control" rows="5"></textarea>
</div>
<div class="form-group" id="savebutton">
<div class="col-sm-12>">
<div class="col-lg-2">
<asp:DropDownList ID="ddlrotate" runat="server" CssClass="form-control" Style="width: 150px;">
<asp:ListItem Text="-- Select --" Value="0"></asp:ListItem>
<asp:ListItem Text="90 Degrees" Value="90"></asp:ListItem>
<asp:ListItem Text="180 Degrees" Value="180"></asp:ListItem>
<asp:ListItem Text="270 Degrees" Value="270"></asp:ListItem>
<asp:ListItem Text="360 Degrees" Value="360"></asp:ListItem>
</asp:DropDownList>
</div>
<div class="col-sm-1">
<asp:Button ID="btnSaveRotation" runat="server" class="btn btn-info" OnClick="btnSaveRotation_Click" Text="Save Rotate" />
</div>
</div>
</div>
</div>
</div>
</form>
</body>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js"></script>
<script src="scripts/jcrop/js/jquery.cropbox.js"></script>
<link href="scripts/jcrop/css/jquery.cropbox.css" rel="stylesheet" />
<script>
$('#plugin').cropbox({
selectors: {
inputInfo: '#plugin textarea.data',
inputFile: '#plugin input[type="file"]',
btnCrop: '#plugin .btn-crop',
btnReset: '#plugin .btn-reset',
resultContainer: '#plugin .cropped .panel-body',
messageBlock: '#message',

},
imageOptions: {
id: 'crpImage',
class: 'img-thumbnail',
style: 'margin-right: 5px; margin-bottom: 5px'
},
variants: [
{
width: 200,
height: 200,
minWidth: 180,
minHeight: 200,
maxWidth: 350,
maxHeight: 350
},
{
width: 150,
height: 200
}
],
messages: [
'Crop a middle image.',
'Crop a small image.'
]
});
</script>

<script type="text/javascript">
var rotation = 0;
var rotate = 0;
var count = 0;
$(document).ready(function () {
$('#dialog').hide();
$('#btncrop').hide();
$('#cropselector').hide();
$('#savebutton').hide();
$('#imageresult').hide();
$('#btncrop').prop('disabled', true);
$('#cropselector').hide();
$('#btnRotate').click(function () {
debugger;
rotation += 90;
if (rotation == 360)
rotation = 0;
jQuery('.img-thumbnail').css({ 'transform': 'rotate(-' + rotation + 'deg)' });

if (rotate == 90)
ddlrotate.val(90);

ddlrotate.val(180);

alert(ddlrotate.val());

});
$('#btnResize').click(function () {
if ($('#filename').val() == '') {
alert('Please Select the Image');
} else {
$("#dialog").show();
$('#txtx').val('');
$('#txty').val('');
}
});
$('#btncrop').click(function () {
count = count + 1;
$('#crpImage').eq(1).remove();
$('#btncrop').prop('disabled', true);

});
$('#btnselect').click(function () {
if ($('#filename').val() == '') {
alert('Please Select the Image');
} else {
$('#btncrop').show();
$('#imageresult').show();
$('#cropselector').show();
$('#savebutton').show();
}
});
$("#selectfiles").change(function () {
debugger;
$('#filename').val($("#selectfiles").val());
});
$('#btnSaveRotation').click(function () {
$('#dialog').hide();
$('#btncrop').hide();
$('#cropselector').hide();
$('#savebutton').hide();
$('#imageresult').hide();
});
$('#txtx').keypress(function (event) {
return isNumber(event, this)
});
$('#txty').keypress(function (event) {
return isNumber(event, this)
});
function isNumber(evt, element) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (
(charCode != 45 || $(element).val().indexOf('-') != -1) && // “-” CHECK MINUS, AND ONLY ONE.
(charCode != 46 || $(element).val().indexOf('.') != -1) && // “.” CHECK DOT, AND ONLY ONE.
(charCode < 48 || charCode > 57))
return false;
return true;
}

});
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);

(function () {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

</html>

Aspx.cx :

using System;
using System.Drawing;
using System.IO;
using System.Web.UI.WebControls;

public partial class lightweightDemo : System.Web.UI.Page
{

protected void Page_Load(object sender, EventArgs e)
{

}

protected void btnSaveResize_Click(object sender, EventArgs e)
{
string path = Server.MapPath("images/");
string str = filename.Value.Replace(@"C:\fakepath\", " ").Trim();
byte[] bytes = System.IO.File.ReadAllBytes(path+ str);
System.Drawing.Image image;
using (MemoryStream ms = new MemoryStream(bytes))
{
image = System.Drawing.Image.FromStream(ms);
}
image = resizeImage(image, new Size(Convert.ToInt32(txtx.Value), Convert.ToInt32(txtx.Value)));
string exn = Path.GetExtension(str);
image.Save(path + str.Replace(exn,"")+ "Resize.jpg");
}
public System.Drawing.Image resizeImage(System.Drawing.Image imgToResize, Size size)
{
return (System.Drawing.Image)(new Bitmap(imgToResize, size) );
}
protected void btnSaveRotation_Click(object sender, EventArgs e)
{
string path = Server.MapPath("images/");
string[] json = imgCrop.InnerText.Split(';');
String str = json[1].Replace("base64,", "");
str = str.Remove(str.Length - 3);
byte[] bytes = Convert.FromBase64String(str);
System.Drawing.Image image;
using (MemoryStream ms = new MemoryStream(bytes))
{
image = System.Drawing.Image.FromStream(ms);
}
if (ddlrotate.SelectedValue == "90")
image.RotateFlip(RotateFlipType.Rotate90FlipNone);
else if (ddlrotate.SelectedValue == "180")
image.RotateFlip(RotateFlipType.Rotate180FlipNone);
else if (ddlrotate.SelectedValue == "270")
image.RotateFlip(RotateFlipType.Rotate270FlipNone);
else if (ddlrotate.SelectedValue == "360")
image.RotateFlip(RotateFlipType.RotateNoneFlipNone);
string fname = filename.Value.Replace(@"C:\fakepath\", " ").Trim();
string exn = Path.GetExtension(fname);
image.Save(path + fname.Replace(exn, "") + "rotate.jpg");
ddlrotate.ClearSelection();
}

}

Image Crop and Rotate Process :
Step :1 Run the application.
Step :2 Click on Browse Button and Select The Image.

Step :4 Click on Selector Button and select the crop area.
Step :6 Click on Crop Button.
Step :7 select the Rotation Degrees.
Step :7 click on Save Rotate Button and check the Image in Your Solution path.