Here is my code ( without preview):
<link href="includes/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.Jcrop.min.js"></script>
<script type="text/javascript" src="js/jquery.pack.js"></script>
<script src="js/jquery.Jcrop.js" type="text/javascript"></script>
<script src="js/jquery.Jcrop.pack.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#imgCrop').Jcrop({
onSelect: storeCoords,
aspectRatio: 1
});
});
function storeCoords(c) {
jQuery('#X1').val(c.x);
jQuery('#Y1').val(c.y);
jQuery('#W1').val(c.w);
jQuery('#H1').val(c.h);
};
</script>
<asp:Panel ID="pnlUpload" runat="server">
<asp:FileUpload ID="Upload" runat="server" />
<br />
<asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" Text="Upload" />
<asp:Label ID="lblError" runat="server" Visible="false" />
</asp:Panel>
<asp:Panel ID="pnlCrop" runat="server" Visible="false">
<asp:Image ID="imgCrop" runat="server"/>
<br />
<asp:HiddenField ID="X1" runat="server" />
<asp:HiddenField ID="Y1" runat="server" />
<asp:HiddenField ID="W1" runat="server" />
<asp:HiddenField ID="H1" runat="server" />
<asp:Button ID="btnCrop" runat="server" Text="Crop" OnClick="btnCrop_Click" />
</asp:Panel>
<asp:Panel ID="pnlCropped" runat="server" Visible="false">
<asp:Image ID="imgCropped" runat="server" />
</asp:Panel> Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.IO
Imports SD = System.Drawing
Imports System.Drawing.Imaging
Imports System.Drawing.Drawing2D
Partial Class photo_upload
Inherits System.Web.UI.Page
Dim path As String = HttpContext.Current.Request.PhysicalApplicationPath + "images\upload\"
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
End Sub
Protected Sub btnUpload_Click(ByVal sender As Object, ByVal e As EventArgs)
Dim FileOK As [Boolean] = False
Dim FileSaved As [Boolean] = False
If Upload.HasFile Then
Session("WorkingImage") = Upload.FileName
Dim FileExtension As String = System.IO.Path.GetExtension(Session("WorkingImage").ToString()).ToLower()
Dim allowedExtensions As [String]() = {".png", ".jpeg", ".jpg", ".gif"}
Dim i As Integer = 0
While i < allowedExtensions.Length
If FileExtension = allowedExtensions(i) Then
FileOK = True
End If
System.Math.Max(System.Threading.Interlocked.Increment(i), i - 1)
End While
End If
If FileOK Then
Try
Upload.PostedFile.SaveAs(path + Session("WorkingImage"))
FileSaved = True
Catch ex As Exception
lblError.Text = "File could not be uploaded." + ex.Message.ToString()
lblError.Visible = True
FileSaved = False
End Try
Else
lblError.Text = "Cannot accept files of this type."
lblError.Visible = True
End If
If FileSaved Then
pnlUpload.Visible = False
pnlCrop.Visible = True
imgCrop.ImageUrl = "images/upload/" + Session("WorkingImage").ToString()
End If
End Sub
Protected Sub btnCrop_Click(ByVal sender As Object, ByVal e As EventArgs)
Dim ImageName As String = Session("WorkingImage").ToString()
Dim w As Integer = Convert.ToInt32(W1.Value)
Dim h As Integer = Convert.ToInt32(H1.Value)
Dim x As Integer = Convert.ToInt32(X1.Value)
Dim y As Integer = Convert.ToInt32(Y1.Value)
Dim CropImage As Byte() = Crop(path + ImageName, w, h, x, y)
Using ms As New MemoryStream(CropImage, 0, CropImage.Length)
ms.Write(CropImage, 0, CropImage.Length)
Using CroppedImage As SD.Image = SD.Image.FromStream(ms, True)
Dim SaveTo As String = path + "crop_" + ImageName
CroppedImage.Save(SaveTo, CroppedImage.RawFormat)
pnlCrop.Visible = False
pnlCropped.Visible = True
imgCropped.ImageUrl = "images/upload/crop_" + ImageName
End Using
End Using
End Sub
Shared Function Crop(ByVal Img As String, ByVal Width As Integer, ByVal Height As Integer, ByVal X As Integer, ByVal Y As Integer) As Byte()
Try
Using OriginalImage As SD.Image = SD.Image.FromFile(Img)
Using bmp As New SD.Bitmap(Width, Height, OriginalImage.PixelFormat)
bmp.SetResolution(OriginalImage.HorizontalResolution, OriginalImage.VerticalResolution)
Using Graphic As SD.Graphics = SD.Graphics.FromImage(bmp)
Graphic.SmoothingMode = SmoothingMode.AntiAlias
Graphic.InterpolationMode = InterpolationMode.HighQualityBicubic
Graphic.PixelOffsetMode = PixelOffsetMode.HighQuality
Graphic.DrawImage(OriginalImage, New SD.Rectangle(0, 0, Width, Height), X, Y, Width, Height, _
SD.GraphicsUnit.Pixel)
Dim ms As New MemoryStream()
bmp.Save(ms, OriginalImage.RawFormat)
Return ms.GetBuffer()
End Using
End Using
End Using
Catch Ex As Exception
Throw (Ex)
End Try
End Function
End Class
Besides the preview problem, i also face another problem.
When i upload a big photo, let said the size is (1500 X1200). The photo will display at 1500 X 1200 after uploaded, how can i make it display in small size with respect ratio ( width: 450)?
Because when the photo size is too big (full on the screen), it is difficult to crop it and affected my design page.