您現在的位置:首頁 > 汽車資訊 >

 用canvas裁剪圖片

發布時間: 2015-01-29 21:06


  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 }

 


興吉大二手汽車
聯系我們
百姓彩票APP 孟连 | 诸暨市 | 布尔津县 | 察哈 | 东乌珠穆沁旗 | 梁河县 | 赤壁市 | 汤阴县 | 商洛市 | 阿合奇县 | 渝中区 | 朝阳市 | 原平市 | 车险 | 江津市 | 寻乌县 | 木里 | 拜城县 | 广丰县 | 永昌县 | 奉新县 | 六盘水市 | 施甸县 | 余姚市 | 保靖县 | 个旧市 | 嘉黎县 | 元谋县 | 德格县 | 沙洋县 | 双牌县 | 临邑县 | 泉州市 | 准格尔旗 | 仙桃市 | 高邮市 | 邯郸市 | 武定县 | 瓦房店市 | 克东县 | 余庆县 | 涿州市 | 获嘉县 | 禄丰县 | 台中县 | 大埔区 | 紫云 | 石城县 | 日照市 | 建阳市 | 龙海市 | 扎鲁特旗 | 滨州市 | 藁城市 | 中山市 | 清水县 | 榆树市 | 浮梁县 | 昭觉县 | 沁源县 | 贵南县 | 泸州市 | 阿鲁科尔沁旗 | 黎平县 | 凤阳县 | 伽师县 | 涞水县 | 神池县 | 讷河市 | 芮城县 | 黄大仙区 | 钦州市 | 昆明市 | 江陵县 | 新兴县 | 临海市 | 武义县 | 阳信县 | 克什克腾旗 | 荣成市 | 商洛市 | 灵石县 | 商水县 | 琼结县 | 象州县 | 博湖县 | 溧阳市 | 凤台县 | 广宁县 | 平乐县 | 十堰市 | 长乐市 | 太原市 | 蒙城县 | 车险 | 泽州县 | 湖南省 | 新余市 | 广南县 | 太湖县 | 安阳县 | 高州市 | 台江县 | 海晏县 | 丹凤县 | 马龙县 | 永福县 | 台前县 | 金溪县 | 宿松县 | 方山县 | 咸阳市 | 临泉县 | 隆子县 | 东台市 | 和静县 | 阜宁县 | 南部县 | 嘉义县 | 霍林郭勒市 | 贵州省 | 琼结县 | 台东县 | 高雄市 | 青海省 | 昭通市 | 沈丘县 | 桦甸市 | 奎屯市 | 红安县 | 静安区 | 房山区 | 蓬莱市 | 桃园市 | 姜堰市 | 绥宁县 | 元阳县 | 梁河县 | 云龙县 | 青海省 | 蓬溪县 | 大渡口区 | 荆州市 | 佛山市 | 益阳市 | 万盛区 | 宁陵县 | 泗阳县 | 天祝 | 中江县 | 鄱阳县 | 哈巴河县 | 临海市 | 潮安县 | 若尔盖县 | 仁布县 | 汾阳市 | 偃师市 | 濮阳县 | 石城县 | 龙口市 | 大石桥市 | 大洼县 | 梨树县 | 和林格尔县 | 邻水 | 财经 | 禹州市 | 江山市 | 黑龙江省 | 德昌县 | 青阳县 | 林周县 | 枞阳县 | 虎林市 | 象山县 | 栖霞市 | 民权县 | 江西省 | 若尔盖县 | 亳州市 | 泸水县 | 廊坊市 | 宜君县 | 肥西县 | 沙田区 | 红安县 | 昭平县 | 株洲市 | 乌鲁木齐市 | 青川县 | 左权县 | 明光市 | 平和县 | 龙岩市 | 武城县 | 枣阳市 | 郓城县 | 彰武县 | 卓资县 | 旬阳县 | 莒南县 | 玛纳斯县 | 公安县 | 买车 | 宁海县 | 富川 | 涿州市 | 大余县 | 定日县 | 晴隆县 | 曲周县 | 浦江县 | 会昌县 | 阿拉善右旗 | 泗阳县 | 收藏 | 望谟县 | 通江县 | 灌南县 | 隆化县 | 璧山县 | 教育 | 宁国市 | 贵州省 | 牙克石市 | 招远市 | 南靖县 | 伊春市 | 泰州市 | 宣化县 | 维西 | 岳池县 | 屏东县 | 华安县 | 台山市 | 固始县 | 清水河县 | 博乐市 | 济源市 | 桃园县 | 句容市 | 宜州市 | 西乌 | 杭锦旗 | 金溪县 | 禹州市 | 万载县 | 四子王旗 | 页游 | 和硕县 |