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.h128         });129         selectObj.px = 0;130         selectObj.py = 0;131     }132 133     function Selection(x, y, w, h) {134         this.x = x; // initial positions135         this.y = y;136         this.w = w; // and size137         this.h = h;138 139         this.px = x; // extra variables to dragging calculations140         this.py = y;141 142         this.csize = 4; // resize cubes size143         this.csizeh = 6; // resize cubes size (on hover)144 145         this.bHow = [false, false, false, false]; // hover statuses146         this.iCSize = [this.csize, this.csize, this.csize, this.csize]; // resize cubes sizes147         this.bDrag = [false, false, false, false]; // drag statuses148         this.bDragAll = false; // drag whole selection149     }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 image157         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 cubes162         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 canvas171 172         // draw source image173         ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height);174 175         // and make it darker176         ctx.fillStyle = ‘rgba(0, 0, 0, 0.5)‘;177         ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);178 179         // draw selection180         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.h203         });204         drawScene();205     };206     image.src =http://www.mamicode.com/ 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 = http://www.mamicode.com/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 =http://www.mamicode.com/ 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 =http://www.mamicode.com/ 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 }