新疆快三登錄 ，可任意拖動(dòng)和改變大小

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

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

jQuery+CSS實(shí)現(xiàn)Ajax圖片裁切功能 展示 crop.js源代碼返回 下載jQuery+CSS實(shí)現(xiàn)Ajax圖片裁切功能： 單獨(dú)下載crop.js源代碼 - 下載整個(gè)jQuery+CSS實(shí)現(xiàn)Ajax圖片裁切功能源代碼 - 類(lèi)型：.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)的相對(duì)于圖片的坐標(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://.bvbsoft.com 22. var fnpicAreaDown, fnpicAreaMove, fnpicAreaUp; //事件的函數(shù)名稱(chēng)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:0px31. });32. //移動(dòng)鼠標(biāo)，該選區(qū)變大33. $(#picArea).bind(mousemove,fnpicAreaMove = function(e){34. //獲取鼠標(biāo)移動(dòng)的相對(duì)35. var iX = e.pageX-offsetX-clickX;36. var iY = e.pageY-offsetY-clickY;37. //首先判斷不能移動(dòng)出picArea，兼容IE38. if(e.pageX>=offsetX && e.pageX<=offsetX+$(this).width()){39. //其次，允許從下往上拖動(dòng)40. if(iX>=0)41. $(#selectArea).css(width,iX);42. else43. $(#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. else49. $(#selectArea).css({height:-iY,top:e.pageY-offsetY});50. }51. moveNine(); //移動(dòng)9個(gè)小方塊52. return false; //阻止瀏覽器的默認(rèn)事件53. });54. return false; //阻止瀏覽器的默認(rèn)事件55. });56. //松開(kāi)鼠標(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. });. 65. var DivWidth, DivHeight, DivLeft, DivTop; //選區(qū)的寬、高、左位置、上位置66. 67. var fnselectDown,fnselectMove;68. //點(diǎn)擊移動(dòng)選區(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. //水平方向不能移動(dòng)出去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. else84. $(#selectArea).css({left:DivLeft+moveOffsetX});85. 86. //豎直方向也不能移動(dòng)出去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. else92. $(#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. else121. $(#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. else131. $(#selectArea).css({top:DivTop+moveOffsetY,height:DivHeight-moveOffsetY});132. } 133. moveNine(); //同時(shí)移動(dòng)其它方塊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. else161. $(#selectArea).css({top:DivTop+moveOffsetY,height:DivHeight-moveOffsetY});162. } 163. moveNine();1. 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). $(#selectArea).css({width:10px});190. else191. $(#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. else200. $(#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. else230. $(#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. else260. $(#selectArea).css({width:DivWidth+moveOffsetX});261. }262. moveNine();263. return false;2. });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. else290. $(#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. else299. $(#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. else329. $(#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. else359. $(#selectArea).css({width:DivWidth+moveOffsetX});360. }361. if(e.pageY<=offsetY+parentHeight){362. if(DivTop+DivHeight+moveOffsetY>=parentHeight)363. $(#selectArea).css({height:DivHeight+moveOffsetY});3. else if(DivHeight+moveOffsetY<10)365. $(#selectArea).css({height:10px});366. else367. $(#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ū)的四個(gè)點(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. //下層圖片剪切，final389. $(#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ū)的四個(gè)點(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. //移動(dòng)那9個(gè)小方塊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. //這個(gè)就是給IE用的，制造一個(gè)看不見(jiàn)的區(qū)域來(lái)讓IE選擇421. $(#squareIE).width(Math.abs(iSelectWidth-8)).height(Math.abs(iSelectHeight-8));