Dot Net Sea: image priview and crop image in asp.net

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Crop Image using crop plugin</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="jquery.Jcrop.js" type="text/javascript"></script>
    <link href="jquery.Jcrop.css" rel="stylesheet" type="text/css" />
     <script type="text/javascript">

         function getcroparea(c) {
             $('#hdnx').val(c.x);
             $('#hdny').val(c.y);
             $('#hdnw').val(c.w);
             $('#hdnh').val(c.h);
         };
</script>

<script type="text/javascript">
    function showimagepreview(input) {
        $("#imgprvw").show();
        if (input.files && input.files[0]) {

            var filerdr = new FileReader();
            filerdr.onload = function (e) {

                $('#imgprvw').attr('src', e.target.result);
                $('#imgprvw').Jcrop({
                    onSelect: getcroparea
                });

            }
            filerdr.readAsDataURL(input.files[0]);
            $("#imgprvw").hide();


        }
    }
</script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:FileUpload runat="server" ID="filUpload1" onchange="showimagepreview(this)" />
    <asp:Image ID="imgprvw" runat="server" src="" />

    </div>

    <div>
<input type="hidden" id="hdnx" runat="server" />
<input type="hidden" id="hdny" runat="server"/>
<input type="hidden" id="hdnw" runat="server"/>
<input type="hidden" id="hdnh" runat="server" />
<asp:Button ID="btncrop" runat="server" OnClick="btncrop_Click" Text="Crop Images" />
<img id="imgcropped" runat="server" visible="false" />
</div>
    </form>
</body>
</html>
==================================================================
using System;
using System.Drawing;
using System.IO;
using Image = System.Drawing.Image;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void btncrop_Click(object sender, EventArgs e)
    {
        try
        {
            string filename = Path.GetFileName(filUpload1.PostedFile.FileName);
            string fname = filename;
            string fpath = Path.Combine(Server.MapPath("~/images"), fname);
            filUpload1.SaveAs(Server.MapPath("images/" + filename));
               Image oimg = Image.FromFile(fpath);

                Rectangle cropcords = new Rectangle(
                Convert.ToInt32(hdnx.Value),
                Convert.ToInt32(hdny.Value),
                Convert.ToInt32(hdnw.Value),
                Convert.ToInt32(hdnh.Value));
                string cfname, cfpath;
                Bitmap bitMap = new Bitmap(cropcords.Width, cropcords.Height, oimg.PixelFormat);
                Graphics grph = Graphics.FromImage(bitMap);
                grph.DrawImage(oimg, new Rectangle(0, 0, bitMap.Width, bitMap.Height), cropcords, GraphicsUnit.Pixel);
                cfname = "crop_" + fname;
                cfpath = Path.Combine(Server.MapPath("~/cropimages"), cfname);
                bitMap.Save(cfpath);
                imgcropped.Visible = true;
                imgcropped.Src = "~/cropimages/" + cfname;

            }
            catch (Exception ex)
            {
                throw ex;
            }
    }
}
================================================
you need to download jscrop js
thanks

Dot Net Sea

Wednesday, 9 July 2014

image priview and crop image in asp.net

No comments:

Post a Comment