Save cropped image path in database and display in Image control in ASP.Net

Last Reply 10 months ago By pandeyism

Posted 11 months ago

Hi Developers ,

I am working a Ngo Project for Child Sponshorship .In my project now i need to How to crop an image around face with ImageResizer using Asp.Net Code.

We are not Save the Binary Data of a photo into database. but we Save File path of a photo into database .

1.First client upload a Child Full size photo.It Displays my Web Page.

2.I need to Crop the full size photo and Disply with zoom and Face only. After i click the full size image will appear-but its not a issue.

3.Now I have bind the full size image, i am trying with google for how to dispaly image with Crop and Zooming.

So friends if anyone know or done this module on your projects means kindly suggest me to how i can done this Requirement.

thanks and Regards with

Paul.S

'a man becomes what he thinks about'

You are viewing reply posted by: pandeyism 10 months ago.
Posted 10 months ago Modified on 10 months ago

Hi paulrajmca,

Please refer below sample.

Get the plugin from the below article and read the details.

Crop and Upload Image with Thumbnail using jQuery and HTML5 in ASP.Net

Get and bind your image from database onClick of button and show in image control and then crop it.

HTML

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.Jcrop.js"></script>
    <script type="text/javascript" src="js/jquery.color.js"></script>
    <link href="css/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $('#btnCrop').click(function () {
                var x1 = $('#imgX1').val();
                var y1 = $('#imgY1').val();
                var width = $('#imgWidth').val();
                var height = $('#imgHeight').val();
                var canvas = $("#canvas")[0];
                var context = canvas.getContext('2d');
                var img = new Image();
                img.onload = function () {
                    canvas.height = height;
                    canvas.width = width;
                    context.drawImage(img, x1, y1, width, height, 0, 0, width, height);
                    $('#imgCropped').val(canvas.toDataURL());
                    $('[id*=btnUpload]').show();
                };
                img.src = $('#Image1').attr("src");
            });
        });
        function SetCoordinates(c) {
            $('#imgX1').val(c.x);
            $('#imgY1').val(c.y);
            $('#imgWidth').val(c.w);
            $('#imgHeight').val(c.h);
            $('#btnCrop').show();
        };
        function ApplyCropPlugin() {

            $('#Image1').Jcrop({
                onChange: SetCoordinates,
                onSelect: SetCoordinates
            });
        }
    </script>
    <br />
    <br />
    <table border="0" cellpadding="0" cellspacing="5">
        <tr>
            <td>
                <asp:Image ID="Image1" runat="server" />
            </td>
            <td>
                <canvas id="canvas" height="5" width="5"></canvas>
            </td>
        </tr>
    </table>
    <br />
    <input type="button" id="btnCrop" value="Crop" style="display: none" />
    <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="Upload" Style="display: none" />
    <input type="hidden" name="imgX1" id="imgX1" />
    <input type="hidden" name="imgY1" id="imgY1" />
    <input type="hidden" name="imgWidth" id="imgWidth" />
    <input type="hidden" name="imgHeight" id="imgHeight" />
    <input type="hidden" name="imgCropped" id="imgCropped" />

Namespaces

C#

using System;
using System.Web.UI;
using System.IO;

VB.Net

Imports System.IO

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    string path = "~/Files/Desert.jpg";
    Image1.ImageUrl = path;
    ScriptManager.RegisterStartupScript(this, this.GetType(), "CropImage", "ApplyCropPlugin();", true);
}

protected void Upload(object sender, EventArgs e)
{
    string base64 = Request.Form["imgCropped"];
    byte[] bytes = Convert.FromBase64String(base64.Split(',')[1]);
    using (FileStream stream = new FileStream(Server.MapPath("~/Images/Cropped.png"), System.IO.FileMode.Create))
    {
        stream.Write(bytes, 0, bytes.Length);
        stream.Flush();
    }
}    

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    Dim path As String = "~/Files/Desert.jpg"
    Image1.ImageUrl = path
    ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "CropImage", "ApplyCropPlugin();", True)
End Sub

Protected Sub Upload(ByVal sender As Object, ByVal e As EventArgs)
    Dim base64 As String = Request.Form("imgCropped")
    Dim bytes As Byte() = Convert.FromBase64String(base64.Split(","c)(1))

    Using stream As FileStream = New FileStream(Server.MapPath("~/Images/Cropped.png"), System.IO.FileMode.Create)
        stream.Write(bytes, 0, bytes.Length)
        stream.Flush()
    End Using
End Sub

Screenshot