使用JavaScript+canvas实现图片裁剪
canvas是一个可以让我们使用脚本绘图的标签，它提供了一系列完整的属性和方法。我们可以借此来实现图形绘制，图像处理甚至实现简单的动画和游戏制作。
canvas标签只有两个属性：width和height，用来设定画布的宽和高，如果没有通过标签属性或者脚本来设置，默认为300*150;
好了，canvas的介绍就先到这里，下面我们来看看javascript结合canvas实现图片的裁剪代码：
varselectObj=null;
functionImageCrop(canvasId,imageSource,x,y,width,height){
varcanvas=$("#"+canvasId);
if(canvas.length==0&&imageSource){
return;
}
functioncanvasMouseDown(e){
StopSelect(e);
canvas.css("cursor","default");
}
functioncanvasMouseMove(e){
varcanvasOffset=canvas.offset();
varpageX=e.pageX||event.targetTouches[0].pageX;
varpageY=e.pageY||event.targetTouches[0].pageY;
iMouseX=Math.floor(pageX-canvasOffset.left);
iMouseY=Math.floor(pageY-canvasOffset.top);
canvas.css("cursor","default");
if(selectObj.bDragAll){
canvas.css("cursor","move");
canvas.data("drag",true);
varcx=iMouseX-selectObj.px;
cx=cx<0?0:cx;
mx=ctx.canvas.width-selectObj.w;
cx=cx>mx?mx:cx;
selectObj.x=cx;
varcy=iMouseY-selectObj.py;
cy=cy<0?0:cy;
my=ctx.canvas.height-selectObj.h;
cy=cy>my?my:cy;
selectObj.y=cy;
}
for(vari=0;i<4;i++){
selectObj.bHow[i]=false;
selectObj.iCSize[i]=selectObj.csize;
}
//hoveringoverresizecubes
if(iMouseX>selectObj.x-selectObj.csizeh&&iMouseX<selectObj.x+selectObj.csizeh&&
iMouseY>selectObj.y-selectObj.csizeh&&iMouseY<selectObj.y+selectObj.csizeh){
canvas.css("cursor","pointer");
selectObj.bHow[0]=true;
selectObj.iCSize[0]=selectObj.csizeh;
}
if(iMouseX>selectObj.x+selectObj.w-selectObj.csizeh&&iMouseX<selectObj.x+selectObj.w+selectObj.csizeh&&
iMouseY>selectObj.y-selectObj.csizeh&&iMouseY<selectObj.y+selectObj.csizeh){
canvas.css("cursor","pointer");
selectObj.bHow[1]=true;
selectObj.iCSize[1]=selectObj.csizeh;
}
if(iMouseX>selectObj.x+selectObj.w-selectObj.csizeh&&iMouseX<selectObj.x+selectObj.w+selectObj.csizeh&&
iMouseY>selectObj.y+selectObj.h-selectObj.csizeh&&iMouseY<selectObj.y+selectObj.h+selectObj.csizeh){
canvas.css("cursor","pointer");
selectObj.bHow[2]=true;
selectObj.iCSize[2]=selectObj.csizeh;
}
if(iMouseX>selectObj.x-selectObj.csizeh&&iMouseX<selectObj.x+selectObj.csizeh&&
iMouseY>selectObj.y+selectObj.h-selectObj.csizeh&&iMouseY<selectObj.y+selectObj.h+selectObj.csizeh){
canvas.css("cursor","pointer");
selectObj.bHow[3]=true;
selectObj.iCSize[3]=selectObj.csizeh;
}
if(iMouseX>selectObj.x&&iMouseX<selectObj.x+selectObj.w&&iMouseY>selectObj.y&&iMouseY<selectObj.y+selectObj.h){
canvas.css("cursor","move");
}
//incaseofdraggingofresizecubes
variFW,iFH,iFX,iFY,mx,my;
if(selectObj.bDrag[0]){
iFX=iMouseX-selectObj.px;
iFY=iMouseY-selectObj.py;
iFW=selectObj.w+selectObj.x-iFX;
iFH=selectObj.h+selectObj.y-iFY;
canvas.data("drag",true);
}
if(selectObj.bDrag[1]){
iFX=selectObj.x;
iFY=iMouseY-selectObj.py;
iFW=iMouseX-selectObj.px-iFX;
iFH=selectObj.h+selectObj.y-iFY;
canvas.data("drag",true);
}
if(selectObj.bDrag[2]){
iFX=selectObj.x;
iFY=selectObj.y;
iFW=iMouseX-selectObj.px-iFX;
iFH=iMouseY-selectObj.py-iFY;
canvas.data("drag",true);
}
if(selectObj.bDrag[3]){
iFX=iMouseX-selectObj.px;
iFY=selectObj.y;
iFW=selectObj.w+selectObj.x-iFX;
iFH=iMouseY-selectObj.py-iFY;
canvas.data("drag",true);
}
if(iFW>selectObj.csizeh*2&&iFH>selectObj.csizeh*2){
selectObj.w=iFW;
selectObj.h=iFH;
selectObj.x=iFX;
selectObj.y=iFY;
}
drawScene();
}
functioncanvasMouseOut(){
$(canvas).trigger("mouseup");
}
functioncanvasMouseUp(){
selectObj.bDragAll=false;
for(vari=0;i<4;i++){
selectObj.bDrag[i]=false;
}
canvas.css("cursor","default");
canvas.data("select",{
x:selectObj.x,
y:selectObj.y,
w:selectObj.w,
h:selectObj.h
});
selectObj.px=0;
selectObj.py=0;
}
functionSelection(x,y,w,h){
this.x=x;//initialpositions
this.y=y;
this.w=w;//andsize
this.h=h;
this.px=x;//extravariablestodraggingcalculations
this.py=y;
this.csize=4;//resizecubessize
this.csizeh=6;//resizecubessize(onhover)
this.bHow=[false,false,false,false];//hoverstatuses
this.iCSize=[this.csize,this.csize,this.csize,this.csize];//resizecubessizes
this.bDrag=[false,false,false,false];//dragstatuses
this.bDragAll=false;//dragwholeselection
}
Selection.prototype.draw=function(){
ctx.strokeStyle='#666';
ctx.lineWidth=2;
ctx.strokeRect(this.x,this.y,this.w,this.h);
//drawpartoforiginalimage
if(this.w>0&&this.h>0){
ctx.drawImage(image,this.x,this.y,this.w,this.h,this.x,this.y,this.w,this.h);
}
//drawresizecubes
ctx.fillStyle='#999';
ctx.fillRect(this.x-this.iCSize[0],this.y-this.iCSize[0],this.iCSize[0]*2,this.iCSize[0]*2);
ctx.fillRect(this.x+this.w-this.iCSize[1],this.y-this.iCSize[1],this.iCSize[1]*2,this.iCSize[1]*2);
ctx.fillRect(this.x+this.w-this.iCSize[2],this.y+this.h-this.iCSize[2],this.iCSize[2]*2,this.iCSize[2]*2);
ctx.fillRect(this.x-this.iCSize[3],this.y+this.h-this.iCSize[3],this.iCSize[3]*2,this.iCSize[3]*2);
};
vardrawScene=function(){
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);//clearcanvas
//drawsourceimage
ctx.drawImage(image,0,0,ctx.canvas.width,ctx.canvas.height);
//andmakeitdarker
ctx.fillStyle='rgba(0,0,0,0.5)';
ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);
//drawselection
selectObj.draw();
canvas.mousedown(canvasMouseDown);
canvas.on("touchstart",canvasMouseDown);
};
varcreateSelection=function(x,y,width,height){
varcontent=$("#imagePreview");
x=x||Math.ceil((content.width()-width)/2);
y=y||Math.ceil((content.height()-height)/2);
returnnewSelection(x,y,width,height);
};
varctx=canvas[0].getContext("2d");
variMouseX=1;
variMouseY=1;
varimage=newImage();
image.onload=function(){
selectObj=createSelection(x,y,width,height);
canvas.data("select",{
x:selectObj.x,
y:selectObj.y,
w:selectObj.w,
h:selectObj.h
});
drawScene();
};
image.src=imageSource;
canvas.mousemove(canvasMouseMove);
canvas.on("touchmove",canvasMouseMove);
varStopSelect=function(e){
varcanvasOffset=$(canvas).offset();
varpageX=e.pageX||event.targetTouches[0].pageX;
varpageY=e.pageY||event.targetTouches[0].pageY;
iMouseX=Math.floor(pageX-canvasOffset.left);
iMouseY=Math.floor(pageY-canvasOffset.top);
selectObj.px=iMouseX-selectObj.x;
selectObj.py=iMouseY-selectObj.y;
if(selectObj.bHow[0]){
selectObj.px=iMouseX-selectObj.x;
selectObj.py=iMouseY-selectObj.y;
}
if(selectObj.bHow[1]){
selectObj.px=iMouseX-selectObj.x-selectObj.w;
selectObj.py=iMouseY-selectObj.y;
}
if(selectObj.bHow[2]){
selectObj.px=iMouseX-selectObj.x-selectObj.w;
selectObj.py=iMouseY-selectObj.y-selectObj.h;
}
if(selectObj.bHow[3]){
selectObj.px=iMouseX-selectObj.x;
selectObj.py=iMouseY-selectObj.y-selectObj.h;
}
if(iMouseX>selectObj.x+selectObj.csizeh&&
iMouseX<selectObj.x+selectObj.w-selectObj.csizeh&&
iMouseY>selectObj.y+selectObj.csizeh&&
iMouseY<selectObj.y+selectObj.h-selectObj.csizeh){
selectObj.bDragAll=true;
}
for(vari=0;i<4;i++){
if(selectObj.bHow[i]){
selectObj.bDrag[i]=true;
}
}
};
canvas.mouseout(canvasMouseOut);
canvas.mouseup(canvasMouseUp);
canvas.on("touchend",canvasMouseUp);
this.getImageData=function(previewID){
vartmpCanvas=$("<canvas></canvas>")[0];
vartmpCtx=tmpCanvas.getContext("2d");
if(tmpCanvas&&selectObj){
tmpCanvas.width=selectObj.w;
tmpCanvas.height=selectObj.h;
tmpCtx.drawImage(image,selectObj.x,selectObj.y,selectObj.w,selectObj.h,0,0,selectObj.w,selectObj.h);
if(document.getElementById(previewID)){
document.getElementById(previewID).src=tmpCanvas.toDataURL();
document.getElementById(previewID).style.border="1pxsolid#ccc";
}
returntmpCanvas.toDataURL();
}
};
}
functionautoResizeImage(maxWidth,maxHeight,objImg){
varimg=newImage();
img.src=objImg.src;
varhRatio;
varwRatio;
varratio=1;
varw=objImg.width;
varh=objImg.height;
wRatio=maxWidth/w;
hRatio=maxHeight/h;
if(w<maxWidth&&h<maxHeight){
return;
}
if(maxWidth==0&&maxHeight==0){
ratio=1;
}elseif(maxWidth==0){
if(hRatio<1){
ratio=hRatio;
}
}elseif(maxHeight==0){
if(wRatio<1){
ratio=wRatio;
}
}elseif(wRatio<1||hRatio<1){
ratio=(wRatio<=hRatio?wRatio:hRatio);
}else{
ratio=(wRatio<=hRatio?wRatio:hRatio)-Math.floor(wRatio<=hRatio?wRatio:hRatio);
}
if(ratio<1){
if(ratio<0.5&&w<maxWidth&&h<maxHeight){
ratio=1-ratio;
}
w=w*ratio;
h=h*ratio;
}
objImg.height=h;
objImg.width=w;
}
小伙伴们拿去试试吧，希望大家能够喜欢，有疑问就给我留言吧。