用canvas裁剪图片

  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 }