Html
===================================================================
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="CroprResizeJquery.aspx.vb" Inherits="CropResizeImgInVB.CroprResizeJquery" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<%-- Now I Will add some js & css file Here. This is required for select crop area --%>
<%-- you can download this Jcrop.css & jquery.Jcrop.js file from Here : https://github.com/tapmodo/Jcrop --%>
<link href="Scripts/Jcrop.css" rel="stylesheet" />
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/Jcrop.js"></script>
<script src="Scripts/pdf.js"></script>
<script src="Scripts/pdf.worker.js"></script>
<script language="javascript">
$(document).ready(function () {
$('#<%=imgUpload.ClientID%>').Jcrop({
onSelect: SelectCropArea
});
});
function SelectCropArea(c) {
$('#<%=X.ClientID%>').val(parseInt(c.x));
$('#<%=Y.ClientID%>').val(parseInt(c.y));
$('#<%=W.ClientID%>').val(parseInt(c.w));
$('#<%=H.ClientID%>').val(parseInt(c.h));
$('#<%=btnCrop.ClientID%>').prop('disabled', false);
}
function uploadimg(input) {
PDFJS.disableWorker = true;
var pdf = $('#FU1');
var url = input.value;
var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
if (ext == "pdf") {
if (file = input.files[0]) {
alert("File upload")
fileReader = new FileReader();
fileReader.onload = function (input) {
PDFJS.getDocument(fileReader.result).then(function getPdfHelloWorld(pdf) {
// Fetch the first page
pdf.getPage(1).then(function getPageHelloWorld(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
// Prepare canvas using PDF page dimensions
var canvas = document.getElementById('thecanvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var task = page.render({ canvasContext: context, viewport: viewport })
task.promise.then(function () {
var block = canvas.toDataURL('image/jpeg').split(";");
// Get the content type of the image
var contentType = block[0].split(":")[1];// In this case "image/gif"
// get the real base64 content of the file
var realData = block[1].split(",")[1];// In this case "R0lGODlhPQBEAPeoAJosM...."
//Save base 64 into hidden file
$('#<%=hdnpdfimgurl.ClientID%>').val(realData);
//click btn
$('#<%=SavePdfImg.ClientID%>').click();
});
});
}, function (error) {
console.log(error);
});
};
fileReader.readAsArrayBuffer(file);
}
}
else
{
$('#<%=btnUpload.ClientID%>').click();
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>Image Upload, Crop & Save using VB.NET & Jquery</h3>
<canvas id="thecanvas" style="display:none"></canvas>
<asp:Button runat="server" ID="SavePdfImg" Style="display:none" OnClick="SavePdfImg_Click"/>
<asp:HiddenField runat="server" ID="hdnpdfimgurl"/>
<%-- HTML Code --%>
<table>
<tr>
<td>
Select Image File :
</td>
<td>
<asp:FileUpload ID="FU1" runat="server" onChange="uploadimg(this)" />
<asp:Button ID="btnUpload" runat="server" style="display:none" OnClick="btnUpload_Click" />
</td>
</tr>
<tr>
<td colspan="3">
<asp:Label ID="lblMsg" runat="server" ForeColor="green" />
</td>
</tr>
</table>
<asp:Panel ID="panCrop" runat="server" Visible="false">
<table>
<tr>
<td><div runat="server" id="rotatediv" visible="false" style="text-align: right;"><asp:Button runat="server" ID="rotatebtn" OnClick="rotatebtn_Click" Text="rotate"/></div>
<asp:Image ID="imgUpload" runat="server" BorderStyle="ridge" />
<div id="dimensions" runat="server" visible="false" style="text-align: center; margin-top: 11px;"><span id="width" runat="server"></span>x<span id="height" runat="server"></span></div>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnCrop" Enabled="false" runat="server" Text="Crop & Save" OnClick="btnCrop_Click" />
</td>
</tr>
<tr>
<td>
<%-- Hidden field for store cror area --%>
<asp:HiddenField ID="X" runat="server" />
<asp:HiddenField ID="Y" runat="server" />
<asp:HiddenField ID="W" runat="server" />
<asp:HiddenField ID="H" runat="server" />
</td>
</tr>
</table>
</asp:Panel>
</div>
</form>
</body>
</html>
=================================================================
Code file
=================================================================
Imports System.IO
Imports System.Drawing
Imports System.Drawing.Imaging
Imports System.Net
Public Class CroprResizeJquery
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub
Protected Sub btnUpload_Click(sender As Object, e As EventArgs)
' Upload Original Image Here
Dim uploadFileName As String = ""
Dim uploadFilePath As String = ""
If FU1.HasFile Then
Dim ext As String = Path.GetExtension(FU1.FileName).ToLower()
If (ext = ".jpg" Or ext = ".jpeg" Or ext = ".gif" Or ext = ".png") Then
uploadFileName = Guid.NewGuid().ToString() + ext
uploadFilePath = Path.Combine(Server.MapPath("~/Images"), uploadFileName)
FU1.SaveAs(uploadFilePath)
imgUpload.ImageUrl = "~/Images/" + uploadFileName
panCrop.Visible = True
Else
lblMsg.Text = "In signature only jpg,jpeg,gif,png and Pdf"
End If
End If
End Sub
Protected Sub SavePdfImg_Click(sender As Object, e As EventArgs)
Dim base64String As String = hdnpdfimgurl.Value
Dim uploadFileName As String = Guid.NewGuid().ToString() + "GK.png"
Dim uploadFilePath As String = Path.Combine(Server.MapPath("~/Images"), uploadFileName)
'Convert Base64 Encoded string to Byte Array.
Dim imageBytes As Byte() = Convert.FromBase64String(base64String)
'Save the Byte Array as Image File.
File.WriteAllBytes(uploadFilePath, imageBytes)
imgUpload.ImageUrl = "~/Images/" + uploadFileName
panCrop.Visible = True
End Sub
Protected Sub btnCrop_Click(sender As Object, e As EventArgs)
'Crop Image Here & Save
Dim fileName As String = Path.GetFileName(imgUpload.ImageUrl)
Dim filePath As String = Path.Combine(Server.MapPath("~/Images"), fileName)
Dim cropFileName As String = ""
Dim cropFilePath As String = ""
If (File.Exists(filePath)) Then
Dim orgImg As Image = Image.FromFile(filePath)
Dim CropArea As New Rectangle(Convert.ToInt32(X.Value),
Convert.ToInt32(Y.Value),
Convert.ToInt32(W.Value),
Convert.ToInt32(H.Value))
Dim Bitmap As Bitmap = New Bitmap(CropArea.Width, CropArea.Height)
Using g As Graphics = Graphics.FromImage(Bitmap)
g.DrawImage(orgImg, New Rectangle(0, 0, Bitmap.Width, Bitmap.Height), CropArea, GraphicsUnit.Pixel)
End Using
filePath = ""
cropFileName = "crop_" & fileName
cropFilePath = Path.Combine(Server.MapPath("~/Images"), cropFileName)
Bitmap.Save(cropFilePath)
' Toolkit.Imaging.ResizeImage(Server.MapPath("~/Images/" & cropFileName), 336, 144)
'CropSaveImg.ImageUrl = "~/Images/" + cropFileName
imgUpload.ImageUrl = "~/Images/" + cropFileName
width.InnerText = W.Value
height.InnerText = H.Value
dimensions.Visible = True
rotatediv.Visible = True
'File.Delete(Path.Combine(Server.MapPath("~/Images"), fileName))
lblMsg.Text = "Image Crop successfully"
End If
End Sub
Protected Sub rotatebtn_Click(sender As Object, e As EventArgs)
'get the path to the image
Dim path As String = Server.MapPath(imgUpload.ImageUrl)
'create an image object from the image in that path
Dim img As System.Drawing.Image = System.Drawing.Image.FromFile(path)
'rotate the image
img.RotateFlip(RotateFlipType.Rotate90FlipNone) ' .Rotate90FlipXY)
'save the image out to the file
img.Save(path)
width.InnerText = img.Width
height.InnerText = img.Height
'release image file
img.Dispose()
End Sub
End Class
'ElseIf
' Dim url As String = "http://localhost:54435/Images/" + uploadFileName
' System.Web.UI.ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), "Script", "imgtopdf('" + url + "');", True)
