DotNetOcean: Image cropping using jquery

Introduction:-

Here I have explained How to crop image with jquery and asp.net.

Description:-

In my previous article I have explained Load Different Pages dynamically using jquery and javascript functionwith displaying progress bar ,How to Show DifferentNotification In Asp.net using Jquery and Javascript ? ,How to calculate differencebetween two dates using JQuery? ,How to call a session variable inJQuery? ,How to ScrollPage from Top to Bottom and from Bottom to Top Using Jquery/Javascript .

In this article I will explain how you can crop your selected image using jQuery and asp.net.

You have follow the below steps to get the result.It will be better if you will copy and paste the code I have written below to see the output.

· First create one css style sheet,here I am providing as jcrop.css

jcrop.css

.jcrop-holder

{

text-align: left;

}

.jcrop-vline, .jcrop-hline

{

font-size: 0;

position: absolute;

background: white url('../images/Jcrop.gif') top left repeat;

}

.jcrop-vline { height: 100%; width: 1px !important; }

.jcrop-hline { width: 100%; height: 1px !important; }

.jcrop-handle {

font-size: 1px;

width: 7px !important;

height: 7px !important;

border: 1px #eee solid;

background-color: #333;

*width: 9px;

*height: 9px;

}

.jcrop-tracker {

*background-color: gray;

width: 100%; height: 100%;

}

.custom .jcrop-vline,

.custom .jcrop-hline

{

background: yellow;

}

.custom .jcrop-handle

{

border-color: black;

background-color: #C7BB00;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

}

.coor

{

width:30px;

}

· Second create one js file,here I am written function inside crop.js

crop.js

function Init() {

$(function() {

$('#MyoriginalImage').Jcrop({

onChange: showCoords,

onSelect: showCoords

});

// supporting code for IE to force "overflow: auto;"

document.getElementById("imgContainer").Mystylefolder["position"] = "relative";

}

function showCoords(MyC) {

$('#Myx1').val(MyC.x);

$('#Myy1').val(MyC.y);

$('#Myx2').val(MyC.Myx2);

$('#Myy2').val(MyC.Myy2);

$('#w').val(MyC.w);

$('#h').val(MyC.h);

};

function ValidateSelectedPortion() {

if (document.getElementById("w").value == "" || document.getElementById("w").value == "0"

|| document.getElementById("h").value == "" || document.getElementById("h").value == "0") {

alert("No area for crop was selected");

return false;

}

· Third create second js file,here write function inside jcrop.js,you can name it in your choice or simple copy and paste this code.

jcrop.js

(function($) {

$.Jcrop = function(Myobj,Myopt )

{

var Myobj = Myobj, Myopt = Myopt ;

if (typeof(Myobj) !== 'object') Myobj = $(Myobj)[0];

if (typeof(Myopt ) !== 'object') Myopt = { };

if (!('trackDocument' in Myopt ))

{

Myopt .trackDocument = $.browser.msie ? false : true;

if ($.browser.msie &&$.browser.version.split('.')[0] == '8')

Myopt .trackDocument = true;

}

if (!('keySupport' in Myopt ))

Myopt .keySupport = $.browser.msie ? false : true;

var defaults = {

//providing some Basic Settings

trackDocument: false,

baseClass: 'jcrop',

addClass: null,

//Providing some Styling Options

bgColor: 'black',

bgOpacity: .6,

borderOpacity: .4,

handleOpacity: .5,

handlePad: 5,

handleSize: 9,

handleOffset: 5,

edgeMargin: 14,

aspectRatio: 0,

keySupport: true,

cornerHandles: true,

sideHandles: true,

drawBorders: true,

dragEdges: true,

boxWidth: 0,

boxHeight: 0,

boundary: 8,

animationDelay: 20,

swingSpeed: 3,

allowSelect: true,

allowMove: true,

allowResize: true,

minSelect: [ 0, 0 ],

maxSize: [ 0, 0 ],

minSize: [ 0, 0 ],

// Here is the Callbacks and Event Handlers

onChange: function() { },

onSelect: function() { }

};

var Myoptions = defaults;

setOptionsFunction(Myopt );

// Initializing some jQuery objects

var $Myorigimg = $(Myobj);

var $Myimg = $Myorigimg.clone().removeAttr('id').css({ position: 'absolute' });

$Myimg.width($Myorigimg.width());

$Myimg.height($Myorigimg.height());

$Myorigimg.after($Myimg).hide();

presize($Myimg,Myoptions.boxWidth,Myoptions.boxHeight);

var boundx = $Myimg.width(),

boundy = $Myimg.height(),

$div = $('<div />')

.width(boundx).height(boundy)

.addClass(cssClass('holder'))

.css({

position: 'relative',

backgroundColor: Myoptions.bgColor

}).insertAfter($Myorigimg).append($Myimg);

;

if (Myoptions.addClass) $div.addClass(Myoptions.addClass);

var $img2 = $('<Myimg />')

.attr('src',$Myimg.attr('src'))

.css('position','absolute')

.width(boundx).height(boundy) ;

var $Myimg_holder = $('<div />')

.width(pct(100)).height(pct(100))

.css({

zIndex: 310,

position: 'absolute',

overflow: 'hidden'

})

.append($img2)

;

var $hdl_holder = $('<div />')/*{{{*/

.width(pct(100)).height(pct(100))

.css('zIndex',320);

var $sel = $('<div />')

.css({

position: 'absolute',

zIndex: 300

})

.insertBefore($Myimg)

.append($Myimg_holder,$hdl_holder)

;

var bound = Myoptions.boundary;

var $Mytrk = newTrackerFunction().width(boundx+(bound*2)).height(boundy+(bound*2))

.css({ position: 'absolute', top: px(-bound), left: px(-bound), zIndex: 290 })

.mousedown(newSelectionFunction);

// Setting more variables to store data

var Myxlimit, Myylimit, Myxmin, Myymin;

var Myxscale, Myyscale, enabled = true;

var MydocOffset = getPosFunction($Myimg),

//Here is some Internal states

btndown, lastcurs, dimmed, animating,

shift_down;

// Here is some internal modules

var MyCoords = function()

{

var Myx1 = 0, Myy1 = 0, Myx2 = 0, Myy2 = 0, ox, oy;

function setPressed(Mypos)/*{{{*/

{

var Mypos = rebound(Mypos);

Myx2 = Myx1 = Mypos[0];

Myy2 = Myy1 = Mypos[1];

};

function setCurrentFunction(Mypos)

{

var Mypos = rebound(Mypos);

ox = Mypos[0] - Myx2;

oy = Mypos[1] - Myy2;

Myx2 = Mypos[0];

Myy2 = Mypos[1];

};

function getOffsetFunction()

{

return [ ox, oy ];

};

/*}}}*/

function moveOffsetFunction(offset)

{

var ox = offset[0], oy = offset[1];

if (0 > Myx1 + ox) ox -= ox + Myx1;

if (0 > Myy1 + oy) oy -= oy + Myy1;

if (boundy < Myy2 + oy) oy += boundy - (Myy2 + oy);

if (boundx < Myx2 + ox) ox += boundx - (Myx2 + ox);

Myx1 += ox;

Myx2 += ox;

Myy1 += oy;

Myy2 += oy;

};

function getCornerFunction(Myord)

{

var MyC = getFixedFunction();

switch(Myord)

{

case 'ne': return [ MyC.Myx2, MyC.y ];

case 'Mynw': return [ MyC.x, MyC.y ];

case 'se': return [ MyC.Myx2, MyC.Myy2 ];

case 'sw': return [ MyC.x, MyC.Myy2 ];

}

};

function getFixedFunction()

{

if (!Myoptions.aspectRatio) return getRectFunction();

// You can optimize this function here

var aspect = Myoptions.aspectRatio,

min_x = Myoptions.minSize[0]/Myxscale,

min_y = Myoptions.minSize[1]/Myyscale,

max_x = Myoptions.maxSize[0]/Myxscale,

max_y = Myoptions.maxSize[1]/Myyscale,

Myrw = Myx2 - Myx1,

Myrh = Myy2 - Myy1,

Myrwa = Math.abs(Myrw ),

Myrha = Math.abs(Myrh),

Myreal_ratio = Myrwa / Myrha ,

Myxx, Myyy

;

if (max_x == 0) { max_x = boundx * 10 }

if (max_y == 0) { max_y = boundy * 10 }

if (Myreal_ratio < aspect)

{

Myyy = Myy2;

w = Myrha * aspect;

Myxx = Myrw < 0 ? Myx1 - w : w + Myx1;

if (Myxx < 0)

{

Myxx = 0;

h = Math.abs((Myxx - Myx1) / aspect);

Myyy = Myrh < 0 ? Myy1 - h: h + Myy1;

}

else if (Myxx > boundx)

{

Myxx = boundx;

h = Math.abs((Myxx - Myx1) / aspect);

Myyy = Myrh < 0 ? Myy1 - h : h + Myy1;

}

else

{

Myxx = Myx2;

h = Myrwa / aspect;

Myyy = Myrh < 0 ? Myy1 - h : Myy1 + h;

if (Myyy < 0)

{

Myyy = 0;

w = Math.abs((Myyy - Myy1) * aspect);

Myxx = Myrw < 0 ? Myx1 - w : w + Myx1;

}

else if (Myyy >boundy)

{

Myyy = boundy;

w = Math.abs(Myyy - Myy1) * aspect;

Myxx = Myrw < 0 ? Myx1 - w : w + Myx1;

}

// Provide some magic effects

if(Myxx > Myx1) { //part of right side

if(Myxx - Myx1< min_x) {

Myxx = Myx1 + min_x;

} else if (Myxx - Myx1 > max_x) {

Myxx = Myx1 + max_x;

}

if(Myyy >Myy1) {

Myyy = Myy1 + (Myxx - Myx1)/aspect;

} else {

Myyy = Myy1 - (Myxx - Myx1)/aspect;

}

} else if (Myxx< Myx1) { // part of left side

if(Myx1 - Myxx< min_x) {

Myxx = Myx1 - min_x

} else if (Myx1 - Myxx > max_x) {

Myxx = Myx1 - max_x;

}

if(Myyy >Myy1) {

Myyy = Myy1 + (Myx1 - Myxx)/aspect;

} else {

Myyy = Myy1 - (Myx1 - Myxx)/aspect;

}

if(Myxx < 0) {

Myx1 -= Myxx;

Myxx = 0;

} else if (Myxx > boundx) {

Myx1 -= Myxx - boundx;

Myxx = boundx;

}

if(Myyy < 0) {

Myy1 -= Myyy ;

Myyy = 0;

} else if (Myyy > boundy) {

Myy1 -= Myyy - boundy;

Myyy = boundy;

}

return last = makeObjFunction(flipCoordsFunction(Myx1,Myy1,Myxx,Myyy ));

};

function rebound(p){

if (p[0] < 0) p[0] = 0;

if (p[1] < 0) p[1] = 0;

if (p[0] > boundx) p[0] = boundx;

if (p[1] > boundy) p[1] = boundy;

return [ p[0], p[1] ];

};

function flipCoordsFunction(Myx1,Myy1,Myx2,Myy2)

{

var Myxa = Myx1, Myxb = Myx2, Myya = Myy1, Myyb = Myy2;

if (Myx2 < Myx1)

{

Myxa = Myx2;

Myxb = Myx1;

}

if (Myy2 < Myy1)

{

Myya = Myy2;

Myyb = Myy1;

}

return [ Math.round(Myxa), Math.round(Myya), Math.round(Myxb), Math.round(Myyb) ];

};

function getRectFunction()

{

var xsize = Myx2 - Myx1;

var ysize = Myy2 - Myy1;

if (Myxlimit && (Math.abs(xsize) > Myxlimit))

Myx2 = (xsize > 0) ? (Myx1 + Myxlimit) : (Myx1 - Myxlimit);

if (Myylimit && (Math.abs(ysize) > Myylimit))

Myy2 = (ysize > 0) ? (Myy1 + Myylimit) : (Myy1 - Myylimit);

if (Myymin && (Math.abs(ysize) < Myymin))

Myy2 = (ysize > 0) ? (Myy1 + Myymin) : (Myy1 - Myymin);

if (Myxmin && (Math.abs(xsize) < Myxmin))

Myx2 = (xsize > 0) ? (Myx1 + Myxmin) : (Myx1 - Myxmin);

if (Myx1 < 0) { Myx2 -= Myx1; Myx1 -= Myx1; }

if (Myy1 < 0) { Myy2 -= Myy1; Myy1 -= Myy1; }

if (Myx2 < 0) { Myx1 -= Myx2; Myx2 -= Myx2; }

if (Myy2 < 0) { Myy1 -= Myy2; Myy2 -= Myy2; }

if (Myx2 > boundx) { var delta = Myx2 - boundx; Myx1 -= delta; Myx2 -= delta; }

if (Myy2 > boundy) { var delta = Myy2 - boundy; Myy1 -= delta; Myy2 -= delta; }

if (Myx1 > boundx) { var delta = Myx1 - boundy; Myy2 -= delta; Myy1 -= delta; }

if (Myy1 > boundy) { var delta = Myy1 - boundy; Myy2 -= delta; Myy1 -= delta; }

return makeObjFunction(flipCoordsFunction(Myx1,Myy1,Myx2,Myy2));

};

function makeObjFunction(a)

{

return { x: a[0], y: a[1], Myx2: a[2], Myy2: a[3],

w: a[2] - a[0], h: a[3] - a[1] };

};

return {

flipCoordsFunction: flipCoordsFunction,

setPressed: setPressed,

setCurrentFunction: setCurrentFunction,

getOffsetFunction: getOffsetFunction,

moveOffsetFunction: moveOffsetFunction,

getCornerFunction: getCornerFunction,

getFixedFunction: getFixedFunction

};

}();

var Selection = function()

{

var start, end, dragmode, Myawake, Myhdep = 370;

var Myborders = { };

var handle = { };

var Myseehandles = false;

var Myhhs = Myoptions.handleOffset;

/* Inserting here some draggable elements */

// Inserting here some border divs for an outline

if (Myoptions.drawBorders) {

Myborders = {

top: insertBorderFunction('hline')

.css('top',$.browser.msie?px(-1):px(0)),

bottom: insertBorderFunction('hline'),

left: insertBorderFunction('vline'),

right: insertBorderFunction('vline')

};

}

// Inserting some handles for edges

if (Myoptions.dragEdges) {

handle.t = insertDragbarFunction('n');

handle.b = insertDragbarFunction('s');

handle.r = insertDragbarFunction('e');

handle.l = insertDragbarFunction('w');

}

// Inserting here side handles

Myoptions.sideHandles &&

createHandlesFunction(['n','s','e','w']);

// Inserting here corner handles

Myoptions.cornerHandles &&

createHandlesFunction(['sw','Mynw','ne','se']);

// writing private methods

function insertBorderFunction(type)/*{{{*/

{

var Myjq = $('<div />')

.css({position: 'absolute', opacity: Myoptions.borderOpacity })

.addClass(cssClass(type));

$Myimg_holder.append(Myjq);

return Myjq;

};

function dragDivFunction(Myord,zi)

{

var Myjq = $('<div />')

.mousedown(createDraggerFunction(Myord))

.css({

cursor: Myord+'-resizeFunction',

position: 'absolute',

zIndex: zi

})

;

$hdl_holder.append(Myjq);

return Myjq;

};

function insertHandleFunction(Myord)

{

return dragDivFunction(Myord,Myhdep++)

.css({ top: px(-Myhhs+1), left: px(-Myhhs+1), opacity: Myoptions.handleOpacity })

.addClass(cssClass('handle'));

};

function insertDragbarFunction(Myord)

{

var s = Myoptions.handleSize,

o = Myhhs,

h = s, w = s,

t = o, l = o;

switch(Myord)

{

case 'n': case 's': w = pct(100); break;

case 'e': case 'w': h = pct(100); break;

}

return dragDivFunction(Myord,Myhdep++).width(w).height(h)

.css({ top: px(-t+1), left: px(-l+1)});

};

function createHandlesFunction(li)

{

for(i in li) handle[li[i]] = insertHandleFunction(li[i]);

};

function moveHandlesFunction(MyC)

{

var midvert = Math.round((MyC.h / 2) - Myhhs),

midhoriz = Math.round((MyC.w / 2) - Myhhs),

north = west = -Myhhs+1,

east = MyC.w - Myhhs,

south = MyC.h - Myhhs,

x, y;

'e' in handle&&

handle.e.css({ top: px(midvert), left: px(east) }) &&

handle.w.css({ top: px(midvert) }) &&

handle.s.css({ top: px(south), left: px(midhoriz) }) &&

handle.n.css({ left: px(midhoriz) });

'ne' in handle&&

handle.ne.css({ left: px(east) }) &&

handle.se.css({ top: px(south), left: px(east) }) &&

handle.sw.css({ top: px(south) });

'b' in handle&&

handle.b.css({ top: px(south) }) &&

handle.r.css({ left: px(east) });

};

function movetoFunction(x,y)

{

$img2.css({ top: px(-y), left: px(-x) });

$sel.css({ top: px(y), left: px(x) });

};

function resizeFunction(w,h)

{

$sel.width(w).height(h);

};

function refreshFunction()

{

var MyC = MyCoords .getFixedFunction();

MyCoords .setPressed([MyC.x,MyC.y]);

MyCoords .setCurrentFunction([MyC.Myx2,MyC.Myy2]);

updateVisibleFunction();

};

//Writing here internal methods

function updateVisibleFunction()

{ if (Myawake) return update(); };

function update()

{

var MyC = MyCoords .getFixedFunction();

resizeFunction(MyC.w,MyC.h);

movetoFunction(MyC.x,MyC.y);

Myoptions.drawBorders &&

Myborders['right'].css({ left: px(MyC.w-1) }) &&

Myborders['bottom'].css({ top: px(MyC.h-1) });

Myseehandles && moveHandlesFunction(MyC);

Myawake || show();

Myoptions.onChange(unscaleFunction(MyC));

};

function show()

{

$sel.show();

$Myimg.css('opacity',Myoptions.bgOpacity);

Myawake = true;

};

function releaseFunction()

{

disableHandlesFunction();

$sel.hide();

$Myimg.css('opacity',1);

Myawake = false;

};

function showHandlesFunction()

{

if (Myseehandles )

{

moveHandlesFunction(MyCoords .getFixedFunction());

$hdl_holder.show();

}

};

function enableHandlesFunction()

{

Myseehandles = true;

if (Myoptions.allowResize)

{

moveHandlesFunction(MyCoords .getFixedFunction());

$hdl_holder.show();

return true;

}

};

function disableHandlesFunction()

{

Myseehandles = false;

$hdl_holder.hide();

};

function animModeFunction(v)

{

(animating = v) ? disableHandlesFunction(): enableHandlesFunction();

};

function doneFunction()

{

animModeFunction(false);

refreshFunction();

};

var $track = newTrackerFunction().mousedown(createDraggerFunction('move'))

.css({ cursor: 'move', position: 'absolute', zIndex: 360 })

$Myimg_holder.append($track);

disableHandlesFunction();

return {

updateVisibleFunction: updateVisibleFunction,

update: update,

releaseFunction: releaseFunction,

refreshFunction: refreshFunction,

setCursor: function (cursor) { $track.css('cursor',cursor); },

enableHandlesFunction: enableHandlesFunction,

enableOnly: function() { Myseehandles = true; },

showHandlesFunction: showHandlesFunction,

disableHandlesFunction: disableHandlesFunction,

animModeFunction: animModeFunction,

doneFunction: doneFunction

};

}();

var MyTracker = function()

{

var onMove = function() { },

onDone = function() { },

trackDoc = Myoptions.trackDocument;

if (!trackDoc)

{

$Mytrk

.mousemove(trackMoveFunction)

.mouseup(trackUpFunction)

.mouseout(trackUpFunction)

;

}

function toFrontFunction()

{

$Mytrk.css({zIndex:450});

if (trackDoc)

{

$(document)

.mousemove(trackMoveFunction)

.mouseup(trackUpFunction)

;

}

function toBackFunction()

{

$Mytrk.css({zIndex:290});

if (trackDoc)

{

$(document)

.unbind('mousemove',trackMoveFunction)

.unbind('mouseup',trackUpFunction)

;

}

function trackMoveFunction(e)

{

onMove(mouseAbsFunction(e));

};

function trackUpFunction(e)

{

e.preventDefault();

e.stopPropagation();

if (btndown)

{

btndown = false;

onDone(mouseAbsFunction(e));

Myoptions.onSelect(unscaleFunction(MyCoords .getFixedFunction()));

toBackFunction();

onMove = function() { };

onDone = function() { };

}

return false;

};

function activateHandlersFunction(move,doneFunction)

{

btndown = true;

onMove = move;

onDone = doneFunction;

toFrontFunction();

return false;

};

function setCursor(t) { $Mytrk.css('cursor',t); };

$Myimg.before($Mytrk);

return {

activateHandlersFunction: activateHandlersFunction,

setCursor: setCursor

};

}();

var KeyManager = function()

{

var $keymgr = $('<input type="radio" />')

.css({ position: 'absolute', left: '-30px' })

.keypress(parseKeyFunction)

.blur(onBlur),

$keywrap = $('<div />')

.css({

position: 'absolute',

overflow: 'hidden'

})

.append($keymgr)

;

function watchKeys()

{

if (Myoptions.keySupport)

{

$keymgr.show();

$keymgr.focus();

}

};

function onBlur(e)

{

$keymgr.hide();

};

function doNudgeFunction(e,x,y)

{

if (Myoptions.allowMove) {

MyCoords .moveOffsetFunction([x,y]);

Selection.updateVisibleFunction();

};

e.preventDefault();

e.stopPropagation();

};

function parseKeyFunction(e)

{

if (e.ctrlKey) return true;

shift_down = e.shiftKey ? true : false;

var nudge = shift_down ? 10 : 1;

switch(e.keyCode)

{

case 37: doNudgeFunction(e,-nudge,0); break;

case 39: doNudgeFunction(e,nudge,0); break;

case 38: doNudgeFunction(e,0,-nudge); break;

case 40: doNudgeFunction(e,0,nudge); break;

case 27: Selection.releaseFunction(); break;

case 9: return true;

}

return nothing(e);

};

if (Myoptions.keySupport) $keywrap.insertBefore($Myimg);

return {

watchKeys: watchKeys

};

}();

//Writing some internal methods

function px(n) { return '' + parseInt(n) + 'px'; };

function pct(n) { return '' + parseInt(n) + '%'; };

function cssClass(cl) { return Myoptions.baseClass + '-' + cl; };

function getPosFunction(Myobj)

{

// Here some updated datas

var Mypos = $(Myobj).offset();

return [ Mypos.left, Mypos.top ];

};

function mouseAbsFunction(e)

{

return [ (e.pageX - MydocOffset [0]), (e.pageY - MydocOffset [1]) ];

};

function myCursor(type)

{

if (type != lastcurs)

{

MyTracker.setCursor(type);

lastcurs = type;

}

};

function startDragModeFunction(mode,Mypos)

{

MydocOffset = getPosFunction($Myimg);

MyTracker.setCursor(mode=='move'?mode:mode+'-resizeFunction');

if (mode == 'move')

return MyTracker.activateHandlersFunction(createMoverFunction(Mypos), doneSelectFunction);

var Myfc = MyCoords .getFixedFunction();

var Myopp = oppLockCornerFunction(mode);

var Myopc = MyCoords .getCornerFunction(oppLockCornerFunction(Myopp));

MyCoords .setPressed(MyCoords .getCornerFunction(Myopp));

MyCoords .setCurrentFunction(Myopc);

MyTracker.activateHandlersFunction(dragmodeHandlerFunction(mode,Myfc),doneSelectFunction);

};

function dragmodeHandlerFunction(mode,f)

{

return function(Mypos) {

if (!Myoptions.aspectRatio) switch(mode)

{

case 'e': Mypos[1] = f.Myy2; break;

case 'w': Mypos[1] = f.Myy2; break;

case 'n': Mypos[0] = f.Myx2; break;

case 's': Mypos[0] = f.Myx2; break;

}

else switch(mode)

{

case 'e': Mypos[1] = f.y+1; break;

case 'w': Mypos[1] = f.y+1; break;

case 'n': Mypos[0] = f.x+1; break;

case 's': Mypos[0] = f.x+1; break;

}

MyCoords .setCurrentFunction(Mypos);

Selection.update();

};

function createMoverFunction(Mypos)

{

var lloc = Mypos;

KeyManager.watchKeys();

return function(Mypos)

{

MyCoords .moveOffsetFunction([Mypos[0] - lloc[0], Mypos[1] - lloc[1]]);

lloc = Mypos;

Selection.update();

};

function oppLockCornerFunction(Myord)

{

switch(Myord)

{

case 'n': return 'sw';

case 's': return 'Mynw';

case 'e': return 'Mynw';

case 'w': return 'ne';

case 'ne': return 'sw';

case 'Mynw': return 'se';

case 'se': return 'Mynw';

case 'sw': return 'ne';

};

function createDraggerFunction(Myord)

{

return function(e) {

if (Myoptions.disabled) return false;

if ((Myord == 'move')&& !Myoptions.allowMove) return false;

btndown = true;

startDragModeFunction(Myord,mouseAbsFunction(e));

e.stopPropagation();

e.preventDefault();

return false;

};

function presize($Myobj,w,h)

{

var Mynw = $Myobj.width(), Mynh = $Myobj.height();

if ((Mynw > w) && w > 0)

{

Mynw = w;

Mynh = (w/$Myobj.width()) * $Myobj.height();

}

if ((Mynh > h) && h > 0)

{

Mynh = h;

Mynw = (h/$Myobj.height()) * $Myobj.width();

}

Myxscale = $Myobj.width() / Mynw;

Myyscale = $Myobj.height() / Mynh;

$Myobj.width(Mynw).height(Mynh);

};

function unscaleFunction(MyC)

{

return {

x: parseInt(MyC.x * Myxscale), y: parseInt(MyC.y * Myyscale),

Myx2: parseInt(MyC.Myx2 * Myxscale), Myy2: parseInt(MyC.Myy2 * Myyscale),

w: parseInt(MyC.w * Myxscale), h: parseInt(MyC.h * Myyscale)

};

function doneSelectFunction(Mypos)

{

var MyC = MyCoords .getFixedFunction();

if (MyC.w > Myoptions.minSelect[0] && MyC.h >Myoptions.minSelect[1])

{

Selection.enableHandlesFunction();

Selection.doneFunction();

}

else

{

Selection.releaseFunction();

}

MyTracker.setCursor( Myoptions.allowSelect?'crosshair':'default' );

};

function newSelectionFunction(e)

{

if (Myoptions.disabled) return false;

if (!Myoptions.allowSelect) return false;

btndown = true;

MydocOffset = getPosFunction($Myimg);

Selection.disableHandlesFunction();

myCursor('crosshair');

var Mypos = mouseAbsFunction(e);

MyCoords .setPressed(Mypos);

MyTracker.activateHandlersFunction(selectDragFunction,doneSelectFunction);

KeyManager.watchKeys();

Selection.update();

e.stopPropagation();

e.preventDefault();

return false;

};

function selectDragFunction(Mypos)

{

MyCoords .setCurrentFunction(Mypos);

Selection.update();

};

function newTrackerFunction()

{

var Mytrk = $('<div></div>').addClass(cssClass('tracker'));

$.browser.msie && Mytrk.css({ opacity: 0, backgroundColor: 'white' });

return Mytrk;

};

//providing API methods

function animateToFunction(a)

{

var Myx1 = a[0] / Myxscale,

Myy1 = a[1] / Myyscale,

Myx2 = a[2] / Myxscale,

Myy2 = a[3] / Myyscale;

if (animating) return;

var Myanimto = MyCoords .flipCoordsFunction(Myx1,Myy1,Myx2,Myy2);

var MyC = MyCoords .getFixedFunction();

var Myanimat = initcr = [ MyC.x, MyC.y, MyC.Myx2, MyC.Myy2 ];

var Myinterv = Myoptions.animationDelay;

var x = Myanimat[0];

var y = Myanimat[1];

var Myx2 = Myanimat[2];

var Myy2 = Myanimat[3];

var ix1 = Myanimto[0] - initcr[0];

var iy1 = Myanimto[1] - initcr[1];

var ix2 = Myanimto[2] - initcr[2];

var iy2 = Myanimto[3] - initcr[3];

var Mypcent = 0;

var Myvelocity = Myoptions.swingSpeed;

Selection.animModeFunction(true);

var Myanimator = function()

{

return function()

{

Mypcent += (100 - Mypcent) / Myvelocity;

Myanimat[0] = x + ((Mypcent / 100) * ix1);

Myanimat[1] = y + ((Mypcent / 100) * iy1);

Myanimat[2] = Myx2 + ((Mypcent / 100) * ix2);

Myanimat[3] = Myy2 + ((Mypcent / 100) * iy2);

if (Mypcent < 100) animateStartFunction();

else Selection.doneFunction();

if (Mypcent >= 99.8) Mypcent = 100;

setSelectRawFunction(Myanimat);

};

}();

function animateStartFunction()

{ window.setTimeout(Myanimator,Myinterv); };

animateStartFunction();

};

function setSelectionFunction(rect)

{

setSelectRawFunction([rect[0]/Myxscale,rect[1]/Myyscale,rect[2]/Myxscale,rect[3]/Myyscale]);

};

function setSelectRawFunction(l)

{

MyCoords .setPressed([l[0],l[1]]);

MyCoords .setCurrentFunction([l[2],l[3]]);

Selection.update();

};

function setOptionsFunction(Myopt )

{

if (typeof(Myopt ) != 'object') Myopt = { };

Myoptions = $.extend(Myoptions,Myopt );

if (typeof(Myoptions.onChange)!=='function')

Myoptions.onChange = function() { };

if (typeof(Myoptions.onSelect)!=='function')

Myoptions.onSelect = function() { };

};

function tellSelectFunction()

{

return unscaleFunction(MyCoords .getFixedFunction());

};

function tellScaledFunction()

{

return MyCoords .getFixedFunction();

};

function setOptionsNewFunction(Myopt )

{

setOptionsFunction(Myopt );

MyinterfaceUpdate();

};

function disableCropFunction()

{

Myoptions.disabled = true;

Selection.disableHandlesFunction();

Selection.setCursor('default');

MyTracker.setCursor('default');

};

function enableCropFunction()

{

Myoptions.disabled = false;

MyinterfaceUpdate();

};

function cancelCropFunction()

{

Selection.doneFunction();

MyTracker.activateHandlersFunction(null,null);

};

function destroyFunction()

{

$div.remove();

$Myorigimg.show();

};

function MyinterfaceUpdate(alt)

//Here This method will tweaks the interface based on Myoptions object only.

//It Called when Myoptions are get changed and at the end of initialization.

{

Myoptions.allowResize ?

alt?Selection.enableOnly():Selection.enableHandlesFunction():

Selection.disableHandlesFunction();

MyTracker.setCursor( Myoptions.allowSelect? 'crosshair': 'default' );

Selection.setCursor( Myoptions.allowMove? 'move': 'default' );

$div.css('backgroundColor',Myoptions.bgColor);

if ('setSelectionFunction' in Myoptions) {

setSelectionFunction(Myopt .setSelectionFunction);

Selection.doneFunction();

delete(Myoptions.setSelectionFunction);

}

if ('trueSize' in Myoptions) {

Myxscale = Myoptions.trueSize[0] / boundx;

Myyscale = Myoptions.trueSize[1] / boundy;

}

Myxlimit = Myoptions.maxSize[0] || 0;

Myylimit = Myoptions.maxSize[1] || 0;

Myxmin = Myoptions.minSize[0] || 0;

Myymin = Myoptions.minSize[1] || 0;

if ('outerImage' in Myoptions)

{

$Myimg.attr('src',Myoptions.outerImage);

delete(Myoptions.outerImage);

}

Selection.refreshFunction();

};

$hdl_holder.hide();

MyinterfaceUpdate(true);

var api = {

animateToFunction: animateToFunction,

setSelectionFunction: setSelectionFunction,

setOptionsFunction: setOptionsNewFunction,

tellSelectFunction: tellSelectFunction,

tellScaledFunction: tellScaledFunction,

disable: disableCropFunction,

enable: enableCropFunction,

cancel: cancelCropFunction,

focus: KeyManager.watchKeys,

getBounds: function() { return [ boundx * Myxscale, boundy * Myyscale ]; },

getWidgetSize: function() { return [ boundx, boundy ]; },

releaseFunction: Selection.releaseFunction,

destroyFunction: destroyFunction

};

$Myorigimg.data('Jcrop',api);

return api;

};

$.fn.Jcrop = function(Myoptions)

{

function attachWhenDoneFunction(from)

{

var Myloadsrc = Myoptions.useImg || from.src;

var Myimg = new Image();

Myimg.onload = function() { $.Jcrop(from,Myoptions); };

Myimg.src = Myloadsrc;

};

if (typeof(Myoptions) !== 'object') Myoptions = { };

// Iterating over each object as well as attaching Jcrop

this.each(function()

{

// checking for If we already have attach to this object

if ($(this).data('Jcrop'))

{

// we can request the api this way

if (Myoptions == 'api') return $(this).data('Jcrop');

// else just reset

else $(this).data('Jcrop').setOptionsFunction(Myoptions);

}

// if it is not attached then preload and attach it

else attachWhenDoneFunction(this);

});

// retuning this for chainable plugin

return this;

};

})(jQuery);

MyCropPage.aspx:

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

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

<title>Cropping image with jquery and ASP.NET By Shibashish Mohanty</title>

</head>

<table>

<tr>

<td>My Original image

<div Mystylefolder="width: 300px; height: 300px; overflow: auto; border: solid 1px black;

padding: 10px; margin-bottom: 5px;" id="imgContainer">

</div>

<div>

WIDTH

HEIGHT

</div>

<div>

<asp:Button runat="server" ID="CroppedBtn" OnClick="CroppedBtn_Click" Text="Crop" OnClientClick="return ValidateSelectedPortion();" />

</div>

</td>

This is your Cropped image:

<div Mystylefolder="width: 300px; height: 300px; overflow: auto; border: solid 1px black;

padding: 10px; margin-bottom: 5px;">

<asp:Literal runat="server" ID="LabelCrpImage"></asp:Literal>

</div>

</td>

</tr>

</table>

</form>

</body>

</html>

MyCropPage.aspx.cs

using System;

using System.Web;

using System.Web.UI;

using System.Drawing;

using System.Drawing.Imaging;

using System.IO;

public partial class MyCropPage : System.Web.UI.Page

{

protected void CroppedBtn_Click(object sender, EventArgs e)

{

int X1 = Convert.ToInt32(Request.Form["Myx1"]);

int Y1 = Convert.ToInt32(Request["Myy1"]);

//Taking input and converting to integer value

int X2 = Convert.ToInt32(Request.Form["Myx2"]);

int Y2 = Convert.ToInt32(Request.Form["Myy2"]);

int X = System.Math.Min(X1, X2);

int Y = System.Math.Min(Y1, Y2);

int w = Convert.ToInt32(Request.Form["w"]);

int h = Convert.ToInt32(Request.Form["h"]);

// It may be any image types like(jpg,jpeg,png,gif) from the local server

string MyoriginalFile = Server.MapPath("~/images/miautito.jpg");

using (Image Myimg = Image.FromFile(MyoriginalFile))

{

using (System.Drawing.Bitmap _Mybitmap = new System.Drawing.Bitmap(w, h))

{

_Mybitmap.SetResolution(Myimg.HorizontalResolution, Myimg.VerticalResolution);

using (Graphics _Mygraphic = Graphics.FromImage(_Mybitmap))

{

_Mygraphic.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;

_Mygraphic.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;

_Mygraphic.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.HighQuality;

_Mygraphic.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;

_Mygraphic.DrawImage(Myimg, 0, 0, w, h);

_Mygraphic.DrawImage(Myimg, new Rectangle(0, 0, w, h), X, Y, w, h, GraphicsUnit.Pixel);

string Myextension = Path.GetExtension(MyoriginalFile);

string fileCropped = Guid.NewGuid().ToString();

string MyFolderPath = Server.MapPath("~/ImageCropped/");

// If your image is a gif file, then it will change it into png

if (Myextension.EndsWith("gif", StringComparison.OrdinalIgnoreCase))

{

Myextension = ".png";

}

string myFullPathName = string.Concat(MyFolderPath, fileCropped, Myextension);

using (EncoderParameters encoderParameters = new EncoderParameters(1))

{

encoderParameters.Param[0] = new EncoderParameter(Encoder.Quality, 100L);

_Mybitmap.Save(myFullPathName, MethodGetImageCode(Myextension), encoderParameters);

}

LabelCrpImage.Text = string.Format("<Myimg src='ImageCropped/{0}' alt='Cropped image'>", fileCropped + Myextension);

}

public static ImageCodecInfo MethodGetImageCode(string Myextension)

{

Myextension = Myextension.ToUpperInvariant();

ImageCodecInfo[] MyCodecs = ImageCodecInfo.GetImageEncoders();

foreach (ImageCodecInfo MyCodec in MyCodecs)

{

if (MyCodec.FilenameExtension.Contains(Myextension))

{

return MyCodec;

}

return MyCodecs[1];

}

Hope you will like this article

Keep coding......

Thanks Shibashish Mohanty

Labels

Thursday, November 22

Image cropping using jquery

1 comment:

.