var selectObj = null;
function ImageCrop(canvasId, imageSource, x, y, width, height) {
var canvas = $("#" + canvasId);
if ( == 0 && imageSource) {
return;
}
function canvasMouseDown(e) {
StopSelect(e);
("cursor", "default");
}
function canvasMouseMove(e) {
var canvasOffset = ();
var pageX = || [0].pageX;
var pageY = || [0].pageY;
iMouseX = (pageX - );
iMouseY = (pageY - );
("cursor", "default");
if () {
("cursor", "move");
("drag", true);
var cx = iMouseX - ;
cx = cx < 0 ? 0 : cx;
mx = - ;
cx = cx > mx ? mx : cx;
= cx;
var cy = iMouseY - ;
cy = cy < 0 ? 0 : cy;
my = - ;
cy = cy > my ? my : cy;
= cy;
}
for (var i = 0; i < 4; i++) {
[i] = false;
[i] = ;
}
// hovering over resize cubes
if (iMouseX > - && iMouseX < + &&
iMouseY > - && iMouseY < + ) {
("cursor", "pointer");
[0] = true;
[0] = ;
}
if (iMouseX > + - && iMouseX < + + &&
iMouseY > - && iMouseY < + ) {
("cursor", "pointer");
[1] = true;
[1] = ;
}
if (iMouseX > + - && iMouseX < + + &&
iMouseY > + - && iMouseY < + + ) {
("cursor", "pointer");
[2] = true;
[2] = ;
}
if (iMouseX > - && iMouseX < + &&
iMouseY > + - && iMouseY < + + ) {
("cursor", "pointer");
[3] = true;
[3] = ;
}
if (iMouseX > && iMouseX < + && iMouseY > && iMouseY < + ) {
("cursor", "move");
}
// in case of dragging of resize cubes
var iFW, iFH, iFX, iFY, mx, my;
if ([0]) {
iFX = iMouseX - ;
iFY = iMouseY - ;
iFW = + - iFX;
iFH = + - iFY;
("drag", true);
}
if ([1]) {
iFX = ;
iFY = iMouseY - ;
iFW = iMouseX - - iFX;
iFH = + - iFY;
("drag", true);
}
if ([2]) {
iFX = ;
iFY = ;
iFW = iMouseX - - iFX;
iFH = iMouseY - - iFY;
("drag", true);
}
if ([3]) {
iFX = iMouseX - ;
iFY = ;
iFW = + - iFX;
iFH = iMouseY - - iFY;
("drag", true);
}
if (iFW > * 2 && iFH > * 2) {
= iFW;
= iFH;
= iFX;
= iFY;
}
drawScene();
}
function canvasMouseOut() {
$(canvas).trigger("mouseup");
}
function canvasMouseUp() {
= false;
for (var i = 0; i < 4; i++) {
[i] = false;
}
("cursor", "default");
("select", {
x: ,
y: ,
w: ,
h:
});
= 0;
= 0;
}
function Selection(x, y, w, h) {
= x; // initial positions
= y;
= w; // and size
= h;
= x; // extra variables to dragging calculations
= y;
= 4; // resize cubes size
= 6; // resize cubes size (on hover)
= [false, false, false, false]; // hover statuses
= [, , , ]; // resize cubes sizes
= [false, false, false, false]; // drag statuses
= false; // drag whole selection
}
= function () {
= '#666';
= 2;
(, , , );
// draw part of original image
if ( > 0 && > 0) {
(image, , , , , , , , );
}
// draw resize cubes
= '#999';
( - [0], - [0], [0] * 2, [0] * 2);
( + - [1], - [1], [1] * 2, [1] * 2);
( + - [2], + - [2], [2] * 2, [2] * 2);
( - [3], + - [3], [3] * 2, [3] * 2);
};
var drawScene = function () {
(0, 0, , ); // clear canvas
// draw source image
(image, 0, 0, , );
// and make it darker
= 'rgba(0, 0, 0, 0.5)';
(0, 0, , );
// draw selection
();
(canvasMouseDown);
("touchstart", canvasMouseDown);
};
var createSelection = function (x, y, width, height) {
var content = $("#imagePreview");
x = x || ((() - width) / 2);
y = y || ((() - height) / 2);
return new Selection(x, y, width, height);
};
var ctx = canvas[0].getContext("2d");
var iMouseX = 1;
var iMouseY = 1;
var image = new Image();
= function () {
selectObj = createSelection(x, y, width, height);
("select", {
x: ,
y: ,
w: ,
h:
});
drawScene();
};
= imageSource;
(canvasMouseMove);
("touchmove", canvasMouseMove);
var StopSelect = function (e) {
var canvasOffset = $(canvas).offset();
var pageX = || [0].pageX;
var pageY = || [0].pageY;
iMouseX = (pageX - );
iMouseY = (pageY - );
= iMouseX - ;
= iMouseY - ;
if ([0]) {
= iMouseX - ;
= iMouseY - ;
}
if ([1]) {
= iMouseX - - ;
= iMouseY - ;
}
if ([2]) {
= iMouseX - - ;
= iMouseY - - ;
}
if ([3]) {
= iMouseX - ;
= iMouseY - - ;
}
if (iMouseX > + &&
iMouseX < + - &&
iMouseY > + &&
iMouseY < + - ) {
= true;
}
for (var i = 0; i < 4; i++) {
if ([i]) {
[i] = true;
}
}
};
(canvasMouseOut);
(canvasMouseUp);
("touchend", canvasMouseUp);
= function (previewID) {
var tmpCanvas = $("<canvas></canvas>")[0];
var tmpCtx = ("2d");
if (tmpCanvas && selectObj) {
= ;
= ;
(image, , , , , 0, 0, , );
if ((previewID)) {
(previewID).src = ();
(previewID). = "1px solid #ccc";
}
return ();
}
};
}
function autoResizeImage(maxWidth, maxHeight, objImg) {
var img = new Image();
= ;
var hRatio;
var wRatio;
var ratio = 1;
var w = ;
var h = ;
wRatio = maxWidth / w;
hRatio = maxHeight / h;
if (w < maxWidth && h < maxHeight) {
return;
}
if (maxWidth == 0 && maxHeight == 0) {
ratio = 1;
} else if (maxWidth == 0) {
if (hRatio < 1) {
ratio = hRatio;
}
} else if (maxHeight == 0) {
if (wRatio < 1) {
ratio = wRatio;
}
} else if (wRatio < 1 || hRatio < 1) {
ratio = (wRatio <= hRatio ? wRatio : hRatio);
} else {
ratio = (wRatio <= hRatio ? wRatio : hRatio) - (wRatio <= hRatio ? wRatio : hRatio);
}
if (ratio < 1) {
if (ratio < 0.5 && w < maxWidth && h < maxHeight) {
ratio = 1 - ratio;
}
w = w * ratio;
h = h * ratio;
}
= h;
= w;
}