Js图片裁切框专用插件

Js图片裁切框专用插件，可任意拖动和改变大小

功能：

图片裁切+保存，附带的例子比较多，以前没见过这种图片裁切，裁切框可以随意用鼠标拖动，输入保存的名称，可以点击那个保存按钮进行保存。

自带了三种方式的裁切框使用演示：

Demo1：随意拖动位置和大小Demo2：随意拖动位置,锁定尺寸大小.Demo3：随意拖动位置,保持尺寸宽高比

代码展示：

jQuery+CSS实现Ajax图片裁切功能展示crop.js源代码返回下载jQuery+CSS实现Ajax图片裁切功能：单独下载crop.js源代码-下载整个jQuery+CSS实现Ajax图片裁切功能源代码-类型：.js文件1.$(function(){2.//初始化图片区域3.varmyimg=newImage();4.myimg.src=$("#mypic2").attr("src");5.//输出图片数据6.$("#showSize").html(myimg.width+"×"+myimg.height);7.8.//初始化图片的位置，根据图片的宽度调整左右9.$("#statistics,#picArea").css("left",$(window).width()/2-myimg.width/2);10.$("#picArea").width(myimg.width).height(myimg.height);11.varparentWidth=parseInt($("#picArea").width());12.varparentHeight=parseInt($("#picArea").height());13.14.//显示鼠标的相对于图片的坐标（左上角为(0,0)）15.varoffsetX=parseInt($("#picArea").css("left"));16.varoffsetY=parseInt($("#picArea").css("top"));17.$("#mypic").bind("mousemove",function(e){18.$("#xPos").text(e.pageX-offsetX);19.$("#yPos").text(e.pageY-offsetY);20.});21.//程序下载自：https://www.bvbsoft.com22.varfnpicAreaDown,fnpicAreaMove,fnpicAreaUp;//事件的函数名称23.//点击鼠标，出现虚线选区24.$("#picArea").bind("mousedown",fnpicAreaDown=function(e){25.varclickX=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.//移动鼠标，该选区变大33.$("#picArea").bind("mousemove",fnpicAreaMove=function(e){34.//获取鼠标移动的相对35.variX=e.pageX-offsetX-clickX;36.variY=e.pageY-offsetY-clickY;37.//首先判断不能移动出picArea，兼容IE38.if(e.pageX=offsetX&&e.pageX<=offsetX+$(this).width()){39.//其次，允许从下往上拖动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();//移动9个小方块52.returnfalse;//阻止浏览器的默认事件53.});54.returnfalse;//阻止浏览器的默认事件55.});56.//松开鼠标，删除出现选区的相关事件57.$("#picArea").bind("mouseup",fnpicAreaUp=function(e){58.$("#picArea").unbind("mousedown",fnpicAreaDown);59.$("#picArea").unbind("mousemove",fnpicAreaMove);60.cropPic();//剪切上层图片，实现四周阴影的效果61.$("#picArea").unbind("mouseup",fnpicAreaUp);62.returnfalse;63.});64.65.varDivWidth,DivHeight,DivLeft,DivTop;//选区的宽、高、左位置、上位置66.67.varfnselectDown,fnselectMove;68.//点击移动选区，不能移出图片本身69.$("#selectArea").bind("mousedown",fnselectDown=function(e){70.varclickX=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.varmoveOffsetX=e.pageX-clickX,moveOffsetY=e.pageY-clickY;77.78.//水平方向不能移动出去79.if(DivLeft+DivWidth+moveOffsetX=parentWidth-2)80.$("#selectArea").css({"left":parentWidth-DivWidth-2});81.elseif(DivLeft+moveOffsetX<0)82.$("#selectArea").css({"left":"0px"});83.else84.$("#selectArea").css({"left":DivLeft+moveOffsetX});85.86.//竖直方向也不能移动出去87.if(DivTop+DivHeight+moveOffsetY=parentHeight-2)88.$("#selectArea").css({"top":parentHeight-DivHeight-2});89.elseif(DivTop+moveOffsetY<0)90.$("#selectArea").css({"top":"0px"});91.else92.$("#selectArea").css({"top":DivTop+moveOffsetY});93.returnfalse;94.});95.returnfalse;96.});97.$("#selectArea").bind("mouseup",function(e){98.$("#picArea").unbind("mousemove",fnselectMove);99.cropPic();100.returnfalse;101.});102.103.varfn0Move;104.//左上角的小方块105.$("#square0").bind("mousedown",function(e){106.varclickX=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.varmoveOffsetX=e.pageX-clickX,moveOffsetY=e.pageY-clickY;113.114.//水平方向左移不能出图片，右移不能把选区宽度变成负数115.if(e.pageX=offsetX){116.if(DivLeft+moveOffsetX<=0)117.$("#selectArea").css({"left":"0px","width":DivWidth-moveOffsetX});118.elseif(moveOffsetXDivWidth-10)119.$("#selectArea").css({"left":DivLeft+DivWidth-10,"width":"10px"});120.else121.$("#selectArea").css({"left":DivLeft+moveOffsetX,"width":DivWidth-moveOffsetX});122.}123.124.//竖直方向上移不能出图片，下移不能把选区高度变成负数125.if(e.pageY=offsetY){126.if(DivTop+moveOffsetY<=0)127.$("#selectArea").css({"top":"0px","height":DivHeight-moveOffsetY});128.elseif(moveOffsetYDivHeight-10)129.$("#selectArea").css({"top":DivTop+DivHeight-10,"height":"10px"});130.else131.$("#selectArea").css({"top":DivTop+moveOffsetY,"height":DivHeight-moveOffsetY});132.}133.moveNine();//同时移动其它方块134.returnfalse;135.});136.returnfalse;137.});138.$("#square0").bind("mouseup",function(e){139.$("#picArea").unbind("mousemove",fn0Move);140.cropPic();//重新剪切图片141.returnfalse;142.});143.144.varfn1Move;145.//上面中间的小方块146.$("#square1").bind("mousedown",function(e){147.varclickX=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.varmoveOffsetX=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.elseif(moveOffsetYDivHeight-10)159.$("#selectArea").css({"top":DivTop+DivHeight-10,"height":"10px"});160.else161.$("#selectArea").css({"top":DivTop+moveOffsetY,"height":DivHeight-moveOffsetY});162.}163.moveNine();164.returnfalse;165.});166.returnfalse;167.});168.$("#square1").bind("mouseup",function(e){169.$("#picArea").unbind("mousemove",fn1Move);170.cropPic();171.returnfalse;172.});173.174.varfn2Move;175.//右上角的小方块176.$("#square2").bind("mousedown",function(e){177.varclickX=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.varmoveOffsetX=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.elseif(DivWidth+moveOffsetX<=10)189.$("#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.elseif(moveOffsetYDivHeight-10)198.$("#selectArea").css({"top":DivTop+DivHeight-10,"height":"10px"});199.else200.$("#selectArea").css({"top":DivTop+moveOffsetY,"height":DivHeight-moveOffsetY});201.}202.moveNine();203.returnfalse;204.});205.returnfalse;206.});207.$("#square2").bind("mouseup",function(e){208.$("#picArea").unbind("mousemove",fn2Move);209.cropPic();210.returnfalse;211.});212.213.varfn3Move;214.//左侧中间的小方块215.$("#square3").bind("mousedown",function(e){216.varclickX=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.varmoveOffsetX=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.elseif(moveOffsetXDivWidth-10)228.$("#selectArea").css({"left":DivLeft+DivWidth-10,"width":"10px"});229.else230.$("#selectArea").css({"left":DivLeft+moveOffsetX,"width":DivWidth-moveOffsetX});231.}232.moveNine();233.returnfalse;234.});235.returnfalse;236.});237.$("#square3").bind("mouseup",function(e){238.$("#picArea").unbind("mousemove",fn3Move);239.cropPic();240.returnfalse;241.});242.243.varfn4Move;244.//右边中间的小方块245.$("#square4").bind("mousedown",function(e){246.varclickX=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.varmoveOffsetX=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.elseif(DivWidth+moveOffsetX<=10)258.$("#selectArea").css({"width":"10px"});259.else260.$("#selectArea").css({"width":DivWidth+moveOffsetX});261.}262.moveNine();263.returnfalse;264.});265.returnfalse;266.});267.$("#square4").bind("mouseup",function(e){268.$("#picArea").unbind("mousemove",fn4Move);269.cropPic();270.returnfalse;271.});272.273.varfn5Move;274.//左下角的小方块275.$("#square5").bind("mousedown",function(e){276.varclickX=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.varmoveOffsetX=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.elseif(moveOffsetXDivWidth-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.elseif(DivHeight+moveOffsetY<10)297.$("#selectArea").css({"height":"10px"});298.else299.$("#selectArea").css({"height":DivHeight+moveOffsetY});300.}301.moveNine();302.returnfalse;303.});304.returnfalse;305.});306.$("#square5").bind("mouseup",function(e){307.$("#picArea").unbind("mousemove",fn5Move);308.cropPic();309.returnfalse;310.});311.312.varfn6Move;313.//下面中间的小方块314.$("#square6").bind("mousedown",function(e){315.varclickX=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.varmoveOffsetX=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.elseif(DivHeight+moveOffsetY<10)327.$("#selectArea").css({"height":"10px"});328.else329.$("#selectArea").css({"height":DivHeight+moveOffsetY});330.}331.moveNine();332.returnfalse;333.});334.returnfalse;335.});336.$("#square6").bind("mouseup",function(e){337.$("#picArea").unbind("mousemove",fn6Move);338.cropPic();339.returnfalse;340.});341.342.varfn7Move;343.//右下角的小方块344.$("#square7").bind("mousedown",function(e){345.varclickX=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.varmoveOffsetX=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.elseif(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});364.elseif(DivHeight+moveOffsetY<10)365.$("#selectArea").css({"height":"10px"});366.else367.$("#selectArea").css({"height":DivHeight+moveOffsetY});368.}369.moveNine();370.returnfalse;371.});372.returnfalse;373.});374.$("#square7").bind("mouseup",function(e){375.$("#picArea").unbind("mousemove",fn6Move);376.cropPic();377.returnfalse;378.});379.380.//双击选区切割381.$("#selectArea").bind("dblclick",function(e){382.vartempSelectArea=$(this);383.//记录选区的四个点，用于切割384.variCropTop=parseInt(tempSelectArea.css("top"))+1;385.variCropRight=parseInt(tempSelectArea.css("left"))+parseInt(tempSelectArea.width())+1;386.variCropBottom=parseInt(tempSelectArea.css("top"))+parseInt(tempSelectArea.height())+1;387.variCropLeft=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.functioncropPic(){397.vartempSelectArea=$("#selectArea");398.//记录选区的四个点，用于切割399.variCropTop=parseInt(tempSelectArea.css("top"))+1;400.variCropRight=parseInt(tempSelectArea.css("left"))+parseInt(tempSelectArea.width())+1;401.variCropBottom=parseInt(tempSelectArea.css("top"))+parseInt(tempSelectArea.height())+1;402.variCropLeft=parseInt(tempSelectArea.css("left"))+1;403.$("#mypic1").css("clip","rect("+iCropTop+"px,"+iCropRight+"px,"+iCropBottom+"px,"+iCropLeft+"px)");404.}405.406.functionmoveNine(){407.//移动那9个小方块408.variSelectWidth=parseInt($("#selectArea").width());409.variSelectHeight=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用的，制造一个看不见的区域来让IE选择421.$("#squareIE").width(Math.abs(iSelectWidth-8)).height(Math.abs(iSelectHeight-8));

Tags:javascript.