Js圖片裁切框?qū)Ｓ貌寮?/h1>

Js圖片裁切框?qū)Ｓ貌寮�，可任意拖動和改變大�?/p>

功能：

圖片裁切+保存，附帶的例子比較多，以前沒見過這種圖片裁切，裁切框可以隨意用鼠標(biāo)拖動，輸入保存的名稱，可以點(diǎn)擊那個保存按鈕進(jìn)行保存。

自帶了三種方式的裁切框使用演示：

Demo1：隨意拖動位置和大小
Demo2：隨意拖動位置,鎖定尺寸大小.
Demo3：隨意拖動位置,保持尺寸寬高比

代碼展示：

jQuery+CSS實(shí)現(xiàn)Ajax圖片裁切功能 展示 crop.js源代碼
返回 下載jQuery+CSS實(shí)現(xiàn)Ajax圖片裁切功能： 單獨(dú)下載crop.js源代碼 - 下載整個jQuery+CSS實(shí)現(xiàn)Ajax圖片裁切功能源代碼 - 類型：.js文件
1.$(function(){
2. //初始化圖片區(qū)域
3. var myimg = new Image();
4. myimg.src = $("#mypic2").attr("src");
5. //輸出圖片數(shù)據(jù)
6. $("#showSize").html(myimg.width + "×" + myimg.height);
7.
8. //初始化圖片的位置，根據(jù)圖片的寬度調(diào)整左右
9. $("#statistics, #picArea").css("left",$(window).width()/2-myimg.width/2);
10. $("#picArea").width(myimg.width).height(myimg.height);
11. var parentWidth = parseInt($("#picArea").width());
12. var parentHeight = parseInt($("#picArea").height());
13.
14. //顯示鼠標(biāo)的相對于圖片的坐標(biāo)（左上角為(0,0)）
15. var offsetX = parseInt($("#picArea").css("left"));
16. var offsetY = parseInt($("#picArea").css("top"));
17. $("#mypic").bind("mousemove",function(e){
18. $("#xPos").text(e.pageX-offsetX);
19. $("#yPos").text(e.pageY-offsetY);
20. });
21. //程序下載自：http://www.bvbsoft.com
22. var fnpicAreaDown, fnpicAreaMove, fnpicAreaUp; //事件的函數(shù)名稱
23. //點(diǎn)擊鼠標(biāo)，出現(xiàn)虛線選區(qū)
24. $("#picArea").bind("mousedown",fnpicAreaDown = function(e){
25. var clickX = e.pageX-offsetX, clickY = e.pageY-offsetY;
26. $("#selectArea").show().css({
27. "left":clickX,
28. "top":clickY,
29. "height":"0px",
30. "width":"0px"
31. });
32. //移動鼠標(biāo)，該選區(qū)變大
33. $("#picArea").bind("mousemove",fnpicAreaMove = function(e){
34. //獲取鼠標(biāo)移動的相對
35. var iX = e.pageX-offsetX-clickX;
36. var iY = e.pageY-offsetY-clickY;
37. //首先判斷不能移動出picArea，兼容IE
38. if(e.pageX>=offsetX && e.pageX<=offsetX+$(this).width()){
39. //其次，允許從下往上拖動
40. if(iX>=0)
41. $("#selectArea").css("width",iX);
42. else
43. $("#selectArea").css({"width":-iX,"left":e.pageX-offsetX});
44. }
45. if(e.pageY>=offsetY && e.pageY<=offsetY+$(this).height()){
46. if(iY>=0)
47. $("#selectArea").css("height",iY);
48. else
49. $("#selectArea").css({"height":-iY,"top":e.pageY-offsetY});
50. }
51. moveNine(); //移動9個小方塊
52. return false; //阻止瀏覽器的默認(rèn)事件
53. });
54. return false; //阻止瀏覽器的默認(rèn)事件
55. });
56. //松開鼠標(biāo)，刪除出現(xiàn)選區(qū)的相關(guān)事件
57. $("#picArea").bind("mouseup",fnpicAreaUp = function(e){
58. $("#picArea").unbind("mousedown",fnpicAreaDown);
59. $("#picArea").unbind("mousemove",fnpicAreaMove);
60. cropPic(); //剪切上層圖片，實(shí)現(xiàn)四周陰影的效果
61. $("#picArea").unbind("mouseup",fnpicAreaUp);
62. return false;
63. });
64.
65. var DivWidth, DivHeight, DivLeft, DivTop; //選區(qū)的寬、高、左位置、上位置
66.
67. var fnselectDown,fnselectMove;
68. //點(diǎn)擊移動選區(qū)，不能移出圖片本身
69. $("#selectArea").bind("mousedown",fnselectDown = function(e){
70. var clickX = e.pageX, clickY = e.pageY;
71. DivWidth = parseInt($("#selectArea").width());
72. DivHeight = parseInt($("#selectArea").height());
73. DivLeft = parseInt($("#selectArea").css("left"));
74. DivTop = parseInt($("#selectArea").css("top"));
75. $("#picArea").bind("mousemove",fnselectMove = function(e){
76. var moveOffsetX = e.pageX - clickX, moveOffsetY = e.pageY - clickY;
77.
78. //水平方向不能移動出去
79. if(DivLeft+DivWidth+moveOffsetX>=parentWidth-2)
80. $("#selectArea").css({"left":parentWidth-DivWidth-2});
81. else if(DivLeft+moveOffsetX<0)
82. $("#selectArea").css({"left":"0px"});
83. else
84. $("#selectArea").css({"left":DivLeft+moveOffsetX});
85.
86. //豎直方向也不能移動出去
87. if(DivTop+DivHeight+moveOffsetY>=parentHeight-2)
88. $("#selectArea").css({"top":parentHeight-DivHeight-2});
89. else if(DivTop+moveOffsetY<0)
90. $("#selectArea").css({"top":"0px"});
91. else
92. $("#selectArea").css({"top":DivTop+moveOffsetY});
93. return false;
94. });
95. return false;
96. });
97. $("#selectArea").bind("mouseup",function(e){
98. $("#picArea").unbind("mousemove",fnselectMove);
99. cropPic();
100. return false;
101. });
102.
103. var fn0Move;
104. //左上角的小方塊
105. $("#square0").bind("mousedown",function(e){
106. var clickX = e.pageX, clickY = e.pageY;
107. DivWidth = parseInt($("#selectArea").width());
108. DivHeight = parseInt($("#selectArea").height());
109. DivLeft = parseInt($("#selectArea").css("left"));
110. DivTop = parseInt($("#selectArea").css("top"));
111. $("#picArea").bind("mousemove",fn0Move = function(e){
112. var moveOffsetX = e.pageX - clickX, moveOffsetY = e.pageY - clickY;
113.
114. //水平方向左移不能出圖片，右移不能把選區(qū)寬度變成負(fù)數(shù)
115. if(e.pageX>=offsetX){
116. if(DivLeft+moveOffsetX<=0)
117. $("#selectArea").css({"left":"0px","width":DivWidth-moveOffsetX});
118. else if(moveOffsetX>DivWidth-10)
119. $("#selectArea").css({"left":DivLeft+DivWidth-10,"width":"10px"});
120. else
121. $("#selectArea").css({"left":DivLeft+moveOffsetX,"width":DivWidth-moveOffsetX});
122. }
123.
124. //豎直方向上移不能出圖片，下移不能把選區(qū)高度變成負(fù)數(shù)
125. if(e.pageY>=offsetY){
126. if(DivTop+moveOffsetY<=0)
127. $("#selectArea").css({"top":"0px","height":DivHeight-moveOffsetY});
128. else if(moveOffsetY>DivHeight-10)
129. $("#selectArea").css({"top":DivTop+DivHeight-10,"height":"10px"});
130. else
131. $("#selectArea").css({"top":DivTop+moveOffsetY,"height":DivHeight-moveOffsetY});
132. }
133. moveNine(); //同時移動其它方塊
134. return false;
135. });
136. return false;
137. });
138. $("#square0").bind("mouseup",function(e){
139. $("#picArea").unbind("mousemove",fn0Move);
140. cropPic(); //重新剪切圖片
141. return false;
142. });
143.
144. var fn1Move;
145. //上面中間的小方塊
146. $("#square1").bind("mousedown",function(e){
147. var clickX = e.pageX, clickY = e.pageY;
148. DivWidth = parseInt($("#selectArea").width());
149. DivHeight = parseInt($("#selectArea").height());
150. DivLeft = parseInt($("#selectArea").css("left"));
151. DivTop = parseInt($("#selectArea").css("top"));
152. $("#picArea").bind("mousemove",fn1Move = function(e){
153. var moveOffsetX = e.pageX - clickX, moveOffsetY = e.pageY - clickY;
154.
155. if(e.pageY>=offsetY){
156. if(DivTop+moveOffsetY<=0)
157. $("#selectArea").css({"top":"0px","height":DivHeight-moveOffsetY});
158. else if(moveOffsetY>DivHeight-10)
159. $("#selectArea").css({"top":DivTop+DivHeight-10,"height":"10px"});
160. else
161. $("#selectArea").css({"top":DivTop+moveOffsetY,"height":DivHeight-moveOffsetY});
162. }
163. moveNine();
164. return false;
165. });
166. return false;
167. });
168. $("#square1").bind("mouseup",function(e){
169. $("#picArea").unbind("mousemove",fn1Move);
170. cropPic();
171. return false;
172. });
173.
174. var fn2Move;
175. //右上角的小方塊
176. $("#square2").bind("mousedown",function(e){
177. var clickX = e.pageX, clickY = e.pageY;
178. DivWidth = parseInt($("#selectArea").width());
179. DivHeight = parseInt($("#selectArea").height());
180. DivLeft = parseInt($("#selectArea").css("left"));
181. DivTop = parseInt($("#selectArea").css("top"));
182. $("#picArea").bind("mousemove",fn2Move = function(e){
183. var moveOffsetX = e.pageX - clickX, moveOffsetY = e.pageY - clickY;
184.
185. if(e.pageX<=offsetX+parentWidth){
186. if(DivLeft+DivWidth+moveOffsetX>=parentWidth)
187. $("#selectArea").css({"width":DivWidth+moveOffsetX});
188. else if(DivWidth+moveOffsetX<=10)
189. $("#selectArea").css({"width":"10px"});
190. else
191. $("#selectArea").css({"width":DivWidth+moveOffsetX});
192. }
193.
194. if(e.pageY>=offsetY){
195. if(DivTop+moveOffsetY<=0)
196. $("#selectArea").css({"top":"0px","height":DivHeight-moveOffsetY});
197. else if(moveOffsetY>DivHeight-10)
198. $("#selectArea").css({"top":DivTop+DivHeight-10,"height":"10px"});
199. else
200. $("#selectArea").css({"top":DivTop+moveOffsetY,"height":DivHeight-moveOffsetY});
201. }
202. moveNine();
203. return false;
204. });
205. return false;
206. });
207. $("#square2").bind("mouseup",function(e){
208. $("#picArea").unbind("mousemove",fn2Move);
209. cropPic();
210. return false;
211. });
212.
213. var fn3Move;
214. //左側(cè)中間的小方塊
215. $("#square3").bind("mousedown",function(e){
216. var clickX = e.pageX, clickY = e.pageY;
217. DivWidth = parseInt($("#selectArea").width());
218. DivHeight = parseInt($("#selectArea").height());
219. DivLeft = parseInt($("#selectArea").css("left"));
220. DivTop = parseInt($("#selectArea").css("top"));
221. $("#picArea").bind("mousemove",fn3Move = function(e){
222. var moveOffsetX = e.pageX - clickX, moveOffsetY = e.pageY - clickY;
223.
224. if(e.pageX>=offsetX){
225. if(DivLeft+moveOffsetX<=0)
226. $("#selectArea").css({"left":"0px","width":DivWidth-moveOffsetX});
227. else if(moveOffsetX>DivWidth-10)
228. $("#selectArea").css({"left":DivLeft+DivWidth-10,"width":"10px"});
229. else
230. $("#selectArea").css({"left":DivLeft+moveOffsetX,"width":DivWidth-moveOffsetX});
231. }
232. moveNine();
233. return false;
234. });
235. return false;
236. });
237. $("#square3").bind("mouseup",function(e){
238. $("#picArea").unbind("mousemove",fn3Move);
239. cropPic();
240. return false;
241. });
242.
243. var fn4Move;
244. //右邊中間的小方塊
245. $("#square4").bind("mousedown",function(e){
246. var clickX = e.pageX, clickY = e.pageY;
247. DivWidth = parseInt($("#selectArea").width());
248. DivHeight = parseInt($("#selectArea").height());
249. DivLeft = parseInt($("#selectArea").css("left"));
250. DivTop = parseInt($("#selectArea").css("top"));
251. $("#picArea").bind("mousemove",fn4Move = function(e){
252. var moveOffsetX = e.pageX - clickX, moveOffsetY = e.pageY - clickY;
253.
254. if(e.pageX<=offsetX+parentWidth){
255. if(DivLeft+DivWidth+moveOffsetX>=parentWidth)
256. $("#selectArea").css({"width":DivWidth+moveOffsetX});
257. else if(DivWidth+moveOffsetX<=10)
258. $("#selectArea").css({"width":"10px"});
259. else
260. $("#selectArea").css({"width":DivWidth+moveOffsetX});
261. }
262. moveNine();
263. return false;
264. });
265. return false;
266. });
267. $("#square4").bind("mouseup",function(e){
268. $("#picArea").unbind("mousemove",fn4Move);
269. cropPic();
270. return false;
271. });
272.
273. var fn5Move;
274. //左下角的小方塊
275. $("#square5").bind("mousedown",function(e){
276. var clickX = e.pageX, clickY = e.pageY;
277. DivWidth = parseInt($("#selectArea").width());
278. DivHeight = parseInt($("#selectArea").height());
279. DivLeft = parseInt($("#selectArea").css("left"));
280. DivTop = parseInt($("#selectArea").css("top"));
281. $("#picArea").bind("mousemove",fn5Move = function(e){
282. var moveOffsetX = e.pageX - clickX, moveOffsetY = e.pageY - clickY;
283.
284. if(e.pageX>=offsetX){
285. if(DivLeft+moveOffsetX<=0)
286. $("#selectArea").css({"left":"0px","width":DivWidth-moveOffsetX});
287. else if(moveOffsetX>DivWidth-10)
288. $("#selectArea").css({"left":DivLeft+DivWidth-10,"width":"10px"});
289. else
290. $("#selectArea").css({"left":DivLeft+moveOffsetX,"width":DivWidth-moveOffsetX});
291. }
292.
293. if(e.pageY<=offsetY+parentHeight){
294. if(DivTop+DivHeight+moveOffsetY>=parentHeight)
295. $("#selectArea").css({"height":DivHeight+moveOffsetY});
296. else if(DivHeight+moveOffsetY<10)
297. $("#selectArea").css({"height":"10px"});
298. else
299. $("#selectArea").css({"height":DivHeight+moveOffsetY});
300. }
301. moveNine();
302. return false;
303. });
304. return false;
305. });
306. $("#square5").bind("mouseup",function(e){
307. $("#picArea").unbind("mousemove",fn5Move);
308. cropPic();
309. return false;
310. });
311.
312. var fn6Move;
313. //下面中間的小方塊
314. $("#square6").bind("mousedown",function(e){
315. var clickX = e.pageX, clickY = e.pageY;
316. DivWidth = parseInt($("#selectArea").width());
317. DivHeight = parseInt($("#selectArea").height());
318. DivLeft = parseInt($("#selectArea").css("left"));
319. DivTop = parseInt($("#selectArea").css("top"));
320. $("#picArea").bind("mousemove",fn6Move = function(e){
321. var moveOffsetX = e.pageX - clickX, moveOffsetY = e.pageY - clickY;
322.
323. if(e.pageY<=offsetY+parentHeight){
324. if(DivTop+DivHeight+moveOffsetY>=parentHeight)
325. $("#selectArea").css({"height":DivHeight+moveOffsetY});
326. else if(DivHeight+moveOffsetY<10)
327. $("#selectArea").css({"height":"10px"});
328. else
329. $("#selectArea").css({"height":DivHeight+moveOffsetY});
330. }
331. moveNine();
332. return false;
333. });
334. return false;
335. });
336. $("#square6").bind("mouseup",function(e){
337. $("#picArea").unbind("mousemove",fn6Move);
338. cropPic();
339. return false;
340. });
341.
342. var fn7Move;
343. //右下角的小方塊
344. $("#square7").bind("mousedown",function(e){
345. var clickX = e.pageX, clickY = e.pageY;
346. DivWidth = parseInt($("#selectArea").width());
347. DivHeight = parseInt($("#selectArea").height());
348. DivLeft = parseInt($("#selectArea").css("left"));
349. DivTop = parseInt($("#selectArea").css("top"));
350. $("#picArea").bind("mousemove",fn7Move = function(e){
351. var moveOffsetX = e.pageX - clickX, moveOffsetY = e.pageY - clickY;
352.
353. if(e.pageX<=offsetX+parentWidth){
354. if(DivLeft+DivWidth+moveOffsetX>=parentWidth)
355. $("#selectArea").css({"width":DivWidth+moveOffsetX});
356. else if(DivWidth+moveOffsetX<=10)
357. $("#selectArea").css({"width":"10px"});
358. else
359. $("#selectArea").css({"width":DivWidth+moveOffsetX});
360. }
361. if(e.pageY<=offsetY+parentHeight){
362. if(DivTop+DivHeight+moveOffsetY>=parentHeight)
363. $("#selectArea").css({"height":DivHeight+moveOffsetY});
364. else if(DivHeight+moveOffsetY<10)
365. $("#selectArea").css({"height":"10px"});
366. else
367. $("#selectArea").css({"height":DivHeight+moveOffsetY});
368. }
369. moveNine();
370. return false;
371. });
372. return false;
373. });
374. $("#square7").bind("mouseup",function(e){
375. $("#picArea").unbind("mousemove",fn6Move);
376. cropPic();
377. return false;
378. });
379.
380. //雙擊選區(qū)切割
381. $("#selectArea").bind("dblclick",function(e){
382. var tempSelectArea = $(this);
383. //記錄選區(qū)的四個點(diǎn)，用于切割
384. var iCropTop = parseInt(tempSelectArea.css("top")) + 1;
385. var iCropRight = parseInt(tempSelectArea.css("left")) + parseInt(tempSelectArea.width()) + 1;
386. var iCropBottom = parseInt(tempSelectArea.css("top")) + parseInt(tempSelectArea.height()) + 1;
387. var iCropLeft = parseInt(tempSelectArea.css("left")) + 1;
388. //下層圖片剪切，final
389. $("#mypic2").css("clip", "rect("+iCropTop+"px,"+iCropRight+"px,"+iCropBottom+"px,"+iCropLeft+"px)");
390. //背景色變成白色
391. $("#picArea").css("backgroundColor","#FFFFFF");
392. tempSelectArea.hide();
393. });
394.});
395.
396.function cropPic(){
397. var tempSelectArea = $("#selectArea");
398. //記錄選區(qū)的四個點(diǎn)，用于切割
399. var iCropTop = parseInt(tempSelectArea.css("top")) + 1;
400. var iCropRight = parseInt(tempSelectArea.css("left")) + parseInt(tempSelectArea.width()) + 1;
401. var iCropBottom = parseInt(tempSelectArea.css("top")) + parseInt(tempSelectArea.height()) + 1;
402. var iCropLeft = parseInt(tempSelectArea.css("left")) + 1;
403. $("#mypic1").css("clip", "rect("+iCropTop+"px,"+iCropRight+"px,"+iCropBottom+"px,"+iCropLeft+"px)");
404.}
405.
406.function moveNine(){
407. //移動那9個小方塊
408. var iSelectWidth = parseInt($("#selectArea").width());
409. var iSelectHeight = parseInt($("#selectArea").height());
410. $("#square0").css({"left":"-1px","top":"-1px"});
411. $("#square1").css({"left":iSelectWidth/2-2,"top":"-1px"});
412. $("#square2").css({"left":iSelectWidth-4,"top":"-1px"});
413. $("#square3").css({"left":"-1px","top":iSelectHeight/2-2});
414. $("#square4").css({"left":iSelectWidth-4,"top":iSelectHeight/2-2});
415. $("#square5").css({"left":"-1px","top":iSelectHeight-4});
416. $("#square6").css({"left":iSelectWidth/2-2,"top":iSelectHeight-4});
417. $("#square7").css({"left":iSelectWidth-4,"top":iSelectHeight-4});
418. $("#square8").css({"left":iSelectWidth/2-3,"top":iSelectHeight/2-3});
419.
420. //這個就是給IE用的，制造一個看不見的區(qū)域來讓IE選擇
421. $("#squareIE").width(Math.abs(iSelectWidth-8)).height(Math.abs(iSelectHeight-8));