Include scripts (inside head tag and get bootstrap links from getbootstrap.com)
--------------------
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="http://localhost:1202/code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="Jquery/bootstrap.min.js"></script>
<link href="Jquery/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.rawgit.com/fengyuanchen/cropper/v0.11.1/dist/cropper.min.css" rel="stylesheet">
<script src="https://cdn.rawgit.com/fengyuanchen/cropper/v0.11.1/dist/cropper.min.js"></script>
<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
<link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css" />
//Script for dropzone
-------------------------
<script>$(document).ready(function () {
Dropzone.autoDiscover = false;
//Simple Dropzonejs
$("#dZUpload").dropzone({
url: "profile_pic.ashx",
addRemoveLinks: true,
maxFiles: 1,
maxFilesize: 5,
//previewsContainer: "#previews",
dictDefaultMessage: "Drag or click to add profile image",
success: function (file, response) {
var imgName = response;
file.previewElement.classList.add("dz-success");
console.log('Successfully uploaded :' + imgName);
var imgName = response;
d = new Date();
$("#imgcrop").attr("src", "");
$(".photo_to_crop1").attr("src", "dump_images/" + imgName + "?" + d.getTime());
$("#img_name").attr("value", imgName);
intialize();
},
error: function (file, response) {
file.previewElement.classList.add("dz-error");
},
sending: function (file, xhr, formData) {
formData.append('name', $("input[name=name]").val());
},
complete: function (response) {
}
});
});
</script>
//Script for cropper
-----------------------
<script>
function intialize() {
var imageURL = $(".photo_to_crop1").attr("src");
var imageBox = $('.photo_to_crop');
var options = {
aspectRatio: 1,
movable: true,
zoomable: true,
responsive: true,
center: true,
scalable: true,
crop: getcroparea
};
if (imageURL != null) {
console.log("It's not empty, building dedault box!");
var DefaultCropBoxOptionObj = {
height: 25,
width: 25
};
console.log(DefaultCropBoxOptionObj);
imageBox.cropper(options);
imageBox.cropper('setData', DefaultCropBoxOptionObj);
imageBox.cropper('replace', imageURL);
}
}
function getcroparea(c) {
$('#hdnx').val(parseInt(c.x));
$('#hdny').val(parseInt(c.y));
$('#hdnw').val(parseInt(c.width));
$('#hdnh').val(parseInt(c.height));
$('#hdnr').val(parseInt(c.rotate));
$('#hdnsx').val(parseInt(c.scaleX));
$('#hdnsy').val(parseInt(c.scaleY));
};
</script>
cropper.aspx
-------------------
<form id="form1" runat="server">
<div id="dZUpload" class="dropzone">
<div class="dz-default dz-message">
<p style="font-family: 'Open Sans'">Drop a photo here or click to add profile photo</p>
</div>
</div>
<div>
<input id="username" type="text" name="name" value="<% =ServerValue %>" style="display: none;" />
<img id="img1" alt="sample image" src="" class="photo_to_crop1" style="display: none;" />
<div style="padding-bottom: 5px; padding-top: 5px; width: 300px">
<img id="imgcropped" runat="server" visible="false" class="img-responsive" />
<h5>
<asp:Label ID="my_ad_err_lbl" runat="server" Text=""></asp:Label></h5>
</div>
<div class="container cropcontainer">
<img id="imgcrop" alt="sample image" src="" class="photo_to_crop" />
<input type="text" style="display: none" id="img_name" name="img_name" value="user.png" />
</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" />
<input type="hidden" id="hdnr" runat="server" />
<input type="hidden" id="hdnsx" runat="server" />
<input type="hidden" id="hdnsy" runat="server" />
<asp:Button ID="btncrop" runat="server" OnClick="btncrop_Click" Text="Crop and Save" CssClass="button3" OnClientClick="reload()" />
<asp:Button ID="save_original" runat="server" OnClick="btnsave_original_Click" Text="Save original" CssClass="button3" OnClientClick="reload()" Style="display: none;" />
<asp:Button ID="pic_delete" runat="server" OnClick="btndelete_Click" Text="Delete Photo" OnClientClick="deletepic()" CssClass="button3" />
</div>
</form>
Code behind
----------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.IO;
using Image = System.Drawing.Image;
using System.Drawing;
using System.Data.SqlClient;
using System.Configuration;
public partial class cropper : System.Web.UI.Page
{
string con = ConfigurationManager.ConnectionStrings["myconnection"].ConnectionString;
public string ServerValue = String.Empty;
public string photo_loc = String.Empty;
public string db_photo_name = String.Empty;
public string db_photo_loc = String.Empty;
public string db_photo_ext = String.Empty;
protected void Page_Load(object sender, EventArgs e)
{
if (Request.Cookies["userdata"] != null)
{
HttpCookie login = Request.Cookies["userdata"];
string user = login["username"];
ServerValue = user;
//load_profile_pic();
}
}
protected void btncrop_Click(object sender, EventArgs e)
{
try
{
//string photo_path = imgcrop.Src;
string photo_name = Request.Form["img_name"];
string fname = photo_name;
string fpath = Path.Combine(Server.MapPath("~/dump_images"), fname);
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("~/profile_images"), cfname);
bitMap.Save(cfpath);
imgcropped.Visible = true;
imgcropped.Src = "~/profile_images/" + cfname;
db_photo_loc = "profile_images/" + cfname;
db_photo_name = cfname;
string id = db_photo_name;
//UPDATE THE IMAGE IN DB
try
{
SqlConnection conn = new SqlConnection(con);
SqlCommand sqlcomm = new SqlCommand(" write your query for update", conn);
conn.Open();
sqlcomm.ExecuteNonQuery();
conn.Close();
my_ad_err_lbl.Text = "Profile photo cropped and saved.";
if (my_ad_err_lbl.Text == "Done")
{
}
}
catch (Exception ex)
{
my_ad_err_lbl.Text = ex.Message;
}
finally
{
}
}
catch (Exception ex)
{
throw ex;
}
}
protected void btndelete_Click(object sender, EventArgs e)
{
delete_photo();
}
public void delete_photo()
{
//DELETE THE IMAGE BEFORE UPDATE
try
{
SqlConnection conn = new SqlConnection(con);
conn.Open();
SqlCommand cmd = new SqlCommand(" write your query to delete '", conn);
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
string imageurl = dr["profile_img_loc"].ToString();
string imageFilePath = HttpContext.Current.Server.MapPath("~/" + imageurl);
System.IO.File.Delete(imageFilePath);
}
}
catch (Exception ex)
{
my_ad_err_lbl.Text = ex.Message;
}
finally
{
}
}
protected void btnsave_original_Click(object sender, EventArgs e)
{
string id = db_photo_name;
//UPDATE THE IMAGE IN DB
try
{
}
catch (Exception ex)
{
}
finally
{
}
}
}
profile_pic.ashx
---------------------
<%@ WebHandler Language="C#" Class="profile_pic" %>
using System;
using System.Web;
using System.IO;
using System.Data.SqlClient;
using System.Configuration;
using System.Data;
public class profile_pic : IHttpHandler {
public void ProcessRequest (HttpContext context) {
string con = ConfigurationManager.ConnectionStrings["prayermeeting_mdf"].ConnectionString;
SqlConnection sqlconn = new SqlConnection(con);
context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
context.Response.ContentType = "text/plain";
string dirFullPath = HttpContext.Current.Server.MapPath("~/profile_images/");
string[] files;
int numFiles;
files = System.IO.Directory.GetFiles(dirFullPath);
numFiles = files.Length;
numFiles = numFiles + 1;
string str_image = "";
foreach (string s in context.Request.Files)
{
HttpPostedFile file = context.Request.Files[s];
// int fileSizeInBytes = file.ContentLength;
string fileName = file.FileName;
string fileExtension = file.ContentType;
if (!string.IsNullOrEmpty(fileName))
{
fileExtension = Path.GetExtension(fileName);
if (fileExtension == ".jpeg" || fileExtension == ".JPEG" || fileExtension == ".png" || fileExtension == ".PNG" || fileExtension == ".jpg" || fileExtension == ".JPG")
{
string user = context.Request["name"];
//context.Response.Write("your username: " + user + fileExtension);
string profile_pic_id = DateTime.Now.ToString("yyyy_MM_dd_HH_mm_ss");
str_image = profile_pic_id + user + fileExtension;
string id=profile_pic_id + user;
string pathToSave = HttpContext.Current.Server.MapPath("~/dump_images/") + str_image;
//context.Response.Write(str_image);
string loc = "dump_images/" + str_image;
//DELETE THE IMAGE BEFORE UPDATE
//SAVE THE IMAGE
file.SaveAs(pathToSave);
// UPDATE THE IMAGE IN DB
}
}
}
context.Response.Write(str_image);
}
public bool IsReusable {
get {
return false;
}
}
