First, solve the problem. Then, write the code.: Image upload, Crop, rotate and Resize( PDF file convert into Image) in VB.net

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 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)

First, solve the problem. Then, write the code.

Wednesday, 2 August 2017

Image upload, Crop, rotate and Resize( PDF file convert into Image) in VB.net

No comments:

Post a Comment