1 var selectObj = null; 2 function ImageCrop(canvasId, imageSource, x, y, width, height) { 3 var canvas = $("#" + canvasId); 4 if (canvas.length == 0 && imageSource) { 5 return; 6 } 7 8 function canvasMouseDown(e) { 9 StopSelect(e); 10 canvas.css("cursor", "default"); 11 } 12 13 function canvasMouseMove(e) { 14 var canvasOffset = canvas.offset(); 15 var pageX = e.pageX || event.targetTouches[0].pageX; 16 var pageY = e.pageY || event.targetTouches[0].pageY; 17 iMouseX = Math.floor(pageX - canvasOffset.left); 18 iMouseY = Math.floor(pageY - canvasOffset.top); 19 20 canvas.css("cursor", "default"); 21 if (selectObj.bDragAll) { 22 canvas.css("cursor", "move"); 23 canvas.data("drag", true); 24 var cx = iMouseX - selectObj.px; 25 cx = cx < 0 ? 0 : cx; 26 mx = ctx.canvas.width - selectObj.w; 27 cx = cx > mx ? mx : cx; 28 selectObj.x = cx; 29 var cy = iMouseY - selectObj.py; 30 cy = cy < 0 ? 0 : cy; 31 my = ctx.canvas.height - selectObj.h; 32 cy = cy > my ? my : cy; 33 selectObj.y = cy; 34 } 35 for (var i = 0; i < 4; i++) { 36 selectObj.bHow[i] = false; 37 selectObj.iCSize[i] = selectObj.csize; 38 } 39 40 // hovering over resize cubes 41 if (iMouseX > selectObj.x - selectObj.csizeh && iMouseX < selectObj.x + selectObj.csizeh && 42 iMouseY > selectObj.y - selectObj.csizeh && iMouseY < selectObj.y + selectObj.csizeh) { 43 canvas.css("cursor", "pointer"); 44 selectObj.bHow[0] = true; 45 selectObj.iCSize[0] = selectObj.csizeh; 46 } 47 if (iMouseX > selectObj.x + selectObj.w - selectObj.csizeh && iMouseX < selectObj.x + selectObj.w + selectObj.csizeh && 48 iMouseY > selectObj.y - selectObj.csizeh && iMouseY < selectObj.y + selectObj.csizeh) { 49 canvas.css("cursor", "pointer"); 50 51 selectObj.bHow[1] = true; 52 selectObj.iCSize[1] = selectObj.csizeh; 53 } 54 if (iMouseX > selectObj.x + selectObj.w - selectObj.csizeh && iMouseX < selectObj.x + selectObj.w + selectObj.csizeh && 55 iMouseY > selectObj.y + selectObj.h - selectObj.csizeh && iMouseY < selectObj.y + selectObj.h + selectObj.csizeh) { 56 canvas.css("cursor", "pointer"); 57 58 selectObj.bHow[2] = true; 59 selectObj.iCSize[2] = selectObj.csizeh; 60 } 61 if (iMouseX > selectObj.x - selectObj.csizeh && iMouseX < selectObj.x + selectObj.csizeh && 62 iMouseY > selectObj.y + selectObj.h - selectObj.csizeh && iMouseY < selectObj.y + selectObj.h + selectObj.csizeh) { 63 canvas.css("cursor", "pointer"); 64 65 selectObj.bHow[3] = true; 66 selectObj.iCSize[3] = selectObj.csizeh; 67 } 68 69 if (iMouseX > selectObj.x && iMouseX < selectObj.x + selectObj.w && iMouseY > selectObj.y && iMouseY < selectObj.y + selectObj.h) { 70 canvas.css("cursor", "move"); 71 } 72 73 // in case of dragging of resize cubes 74 var iFW, iFH, iFX, iFY, mx, my; 75 if (selectObj.bDrag[0]) { 76 iFX = iMouseX - selectObj.px; 77 iFY = iMouseY - selectObj.py; 78 iFW = selectObj.w + selectObj.x - iFX; 79 iFH = selectObj.h + selectObj.y - iFY; 80 canvas.data("drag", true); 81 } 82 if (selectObj.bDrag[1]) { 83 iFX = selectObj.x; 84 iFY = iMouseY - selectObj.py; 85 iFW = iMouseX - selectObj.px - iFX; 86 iFH = selectObj.h + selectObj.y - iFY; 87 canvas.data("drag", true); 88 } 89 if (selectObj.bDrag[2]) { 90 iFX = selectObj.x; 91 iFY = selectObj.y; 92 iFW = iMouseX - selectObj.px - iFX; 93 iFH = iMouseY - selectObj.py - iFY; 94 canvas.data("drag", true); 95 } 96 if (selectObj.bDrag[3]) { 97 iFX = iMouseX - selectObj.px; 98 iFY = selectObj.y; 99 iFW = selectObj.w + selectObj.x - iFX; 100 iFH = iMouseY - selectObj.py - iFY; 101 canvas.data("drag", true); 102 } 103 104 if (iFW > selectObj.csizeh * 2 && iFH > selectObj.csizeh * 2) { 105 selectObj.w = iFW; 106 selectObj.h = iFH; 107 selectObj.x = iFX; 108 selectObj.y = iFY; 109 } 110 drawScene(); 111 } 112 113 function canvasMouseOut() { 114 $(canvas).trigger("mouseup"); 115 } 116 117 function canvasMouseUp() { 118 selectObj.bDragAll = false; 119 for (var i = 0; i < 4; i++) { 120 selectObj.bDrag[i] = false; 121 } 122 canvas.css("cursor", "default"); 123 canvas.data("select", { 124 x: selectObj.x, 125 y: selectObj.y, 126 w: selectObj.w, 127 h: selectObj.h 128 }); 129 selectObj.px = 0; 130 selectObj.py = 0; 131 } 132 133 function Selection(x, y, w, h) { 134 this.x = x; // initial positions 135 this.y = y; 136 this.w = w; // and size 137 this.h = h; 138 139 this.px = x; // extra variables to dragging calculations 140 this.py = y; 141 142 this.csize = 4; // resize cubes size 143 this.csizeh = 6; // resize cubes size (on hover) 144 145 this.bHow = [false, false, false, false]; // hover statuses 146 this.iCSize = [this.csize, this.csize, this.csize, this.csize]; // resize cubes sizes 147 this.bDrag = [false, false, false, false]; // drag statuses 148 this.bDragAll = false; // drag whole selection 149 } 150 151 Selection.prototype.draw = function () { 152 ctx.strokeStyle = '#666'; 153 ctx.lineWidth = 2; 154 ctx.strokeRect(this.x, this.y, this.w, this.h); 155 156 // draw part of original image 157 if (this.w > 0 && this.h > 0) { 158 ctx.drawImage(image, this.x, this.y, this.w, this.h, this.x, this.y, this.w, this.h); 159 } 160 161 // draw resize cubes 162 ctx.fillStyle = '#999'; 163 ctx.fillRect(this.x - this.iCSize[0], this.y - this.iCSize[0], this.iCSize[0] * 2, this.iCSize[0] * 2); 164 ctx.fillRect(this.x + this.w - this.iCSize[1], this.y - this.iCSize[1], this.iCSize[1] * 2, this.iCSize[1] * 2); 165 ctx.fillRect(this.x + this.w - this.iCSize[2], this.y + this.h - this.iCSize[2], this.iCSize[2] * 2, this.iCSize[2] * 2); 166 ctx.fillRect(this.x - this.iCSize[3], this.y + this.h - this.iCSize[3], this.iCSize[3] * 2, this.iCSize[3] * 2); 167 }; 168 169 var drawScene = function () { 170 ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // clear canvas 171 172 // draw source image 173 ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height); 174 175 // and make it darker 176 ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'; 177 ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); 178 179 // draw selection 180 selectObj.draw(); 181 canvas.mousedown(canvasMouseDown); 182 canvas.on("touchstart", canvasMouseDown); 183 }; 184 185 var createSelection = function (x, y, width, height) { 186 var content = $("#imagePreview"); 187 x = x || Math.ceil((content.width() - width) / 2); 188 y = y || Math.ceil((content.height() - height) / 2); 189 return new Selection(x, y, width, height); 190 }; 191 192 var ctx = canvas[0].getContext("2d"); 193 var iMouseX = 1; 194 var iMouseY = 1; 195 var image = new Image(); 196 image.onload = function () { 197 selectObj = createSelection(x, y, width, height); 198 canvas.data("select", { 199 x: selectObj.x, 200 y: selectObj.y, 201 w: selectObj.w, 202 h: selectObj.h 203 }); 204 drawScene(); 205 }; 206 image.src = imageSource; 207 208 canvas.mousemove(canvasMouseMove); 209 canvas.on("touchmove", canvasMouseMove); 210 211 var StopSelect = function (e) { 212 var canvasOffset = $(canvas).offset(); 213 var pageX = e.pageX || event.targetTouches[0].pageX; 214 var pageY = e.pageY || event.targetTouches[0].pageY; 215 iMouseX = Math.floor(pageX - canvasOffset.left); 216 iMouseY = Math.floor(pageY - canvasOffset.top); 217 218 selectObj.px = iMouseX - selectObj.x; 219 selectObj.py = iMouseY - selectObj.y; 220 221 if (selectObj.bHow[0]) { 222 selectObj.px = iMouseX - selectObj.x; 223 selectObj.py = iMouseY - selectObj.y; 224 } 225 if (selectObj.bHow[1]) { 226 selectObj.px = iMouseX - selectObj.x - selectObj.w; 227 selectObj.py = iMouseY - selectObj.y; 228 } 229 if (selectObj.bHow[2]) { 230 selectObj.px = iMouseX - selectObj.x - selectObj.w; 231 selectObj.py = iMouseY - selectObj.y - selectObj.h; 232 } 233 if (selectObj.bHow[3]) { 234 selectObj.px = iMouseX - selectObj.x; 235 selectObj.py = iMouseY - selectObj.y - selectObj.h; 236 } 237 238 if (iMouseX > selectObj.x + selectObj.csizeh && 239 iMouseX < selectObj.x + selectObj.w - selectObj.csizeh && 240 iMouseY > selectObj.y + selectObj.csizeh && 241 iMouseY < selectObj.y + selectObj.h - selectObj.csizeh) { 242 selectObj.bDragAll = true; 243 } 244 245 for (var i = 0; i < 4; i++) { 246 if (selectObj.bHow[i]) { 247 selectObj.bDrag[i] = true; 248 } 249 } 250 }; 251 canvas.mouseout(canvasMouseOut); 252 canvas.mouseup(canvasMouseUp); 253 canvas.on("touchend", canvasMouseUp); 254 255 this.getImageData = function (previewID) { 256 var tmpCanvas = $("<canvas></canvas>")[0]; 257 var tmpCtx = tmpCanvas.getContext("2d"); 258 if (tmpCanvas && selectObj) { 259 tmpCanvas.width = selectObj.w; 260 tmpCanvas.height = selectObj.h; 261 tmpCtx.drawImage(image, selectObj.x, selectObj.y, selectObj.w, selectObj.h, 0, 0, selectObj.w, selectObj.h); 262 if (document.getElementById(previewID)) { 263 document.getElementById(previewID).src = tmpCanvas.toDataURL(); 264 document.getElementById(previewID).style.border = "1px solid #ccc"; 265 } 266 return tmpCanvas.toDataURL(); 267 } 268 }; 269 } 270 271 function autoResizeImage(maxWidth, maxHeight, objImg) { 272 var img = new Image(); 273 img.src = objImg.src; 274 var hRatio; 275 var wRatio; 276 var ratio = 1; 277 var w = objImg.width; 278 var h = objImg.height; 279 wRatio = maxWidth / w; 280 hRatio = maxHeight / h; 281 if (w < maxWidth && h < maxHeight) { 282 return; 283 } 284 if (maxWidth == 0 && maxHeight == 0) { 285 ratio = 1; 286 } else if (maxWidth == 0) { 287 if (hRatio < 1) { 288 ratio = hRatio; 289 } 290 } else if (maxHeight == 0) { 291 if (wRatio < 1) { 292 ratio = wRatio; 293 } 294 } else if (wRatio < 1 || hRatio < 1) { 295 ratio = (wRatio <= hRatio ? wRatio : hRatio); 296 } else { 297 ratio = (wRatio <= hRatio ? wRatio : hRatio) - Math.floor(wRatio <= hRatio ? wRatio : hRatio); 298 } 299 if (ratio < 1) { 300 if (ratio < 0.5 && w < maxWidth && h < maxHeight) { 301 ratio = 1 - ratio; 302 } 303 w = w * ratio; 304 h = h * ratio; 305 } 306 objImg.height = h; 307 objImg.width = w; 308 }