canvas是一个可以让我们使用脚本绘图的标签，它提供了一系列完整的属性和方法。我们可以借此来实现图形绘制，图像处理甚至实现简单的动画和游戏制作。
canvas标签只有两个属性：width和height，用来设定画布的宽和高，如果没有通过标签属性或者脚本来设置，默认为300*150;
好了，canvas的介绍就先到这里，下面我们来看看javascript结合canvas实现图片的裁剪代码：
代码如下:
touches[0].pageX;
var pageY = 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);
var cx = iMouseX - selectObj.px;
cx = cx < 0 ? 0 : cx;
mx = ctx.canvas.width - selectObj.w;
cx = cx > mx ? mx : cx;
selectObj.x = cx;
var cy = iMouseY - selectObj.py;
cy = cy < 0 ? 0 : cy;
my = ctx.canvas.height - selectObj.h;
cy = cy > my ? my : cy;
selectObj.y = cy;
}
for (var i = 0; i < 4; i++) {
selectObj.bHow[i] = false;
selectObj.iCSize[i] = selectObj.csize;
}
// hovering over resize cubes
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");
}
// in case of dragging of resize cubes
var iFW,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();
}
function canvasMouSEOut() {
$(canvas).trigger("mouseup");
}
function canvasMouseUp() {
selectObj.bDragall = false;
for (var i = 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;
}
function Selection(x,w,h) {
this.x = x; // initial positions
this.y = y;
this.w = w; // and size
this.h = h;
this.px = x; // extra variables to dragging calculations
this.py = y;
this.csize = 4; // resize cubes size
this.csizeh = 6; // resize cubes size (on hover)
this.bHow = [false,false,false]; // hover statuses
this.iCSize = [this.csize,this.csize,this.csize]; // resize cubes sizes
this.bDrag = [false,false]; // drag statuses
this.bDragAll = false; // drag whole selection
}
Selection.prototype.draw = function () {
ctx.strokeStyle = '#666';
ctx.lineWidth = 2;
ctx.strokeRect(this.x,this.y,this.w,this.h);
// draw part of original image
if (this.w > 0 && this.h > 0) {
ctx.drawImage(image,this.x,this.h,this.h);
}
// draw resize cubes
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);
};
var drawScene = function () {
ctx.clearRect(0,ctx.canvas.width,ctx.canvas.height); // clear canvas
// draw source image
ctx.drawImage(image,ctx.canvas.height);
// and make it darker
ctx.fillStyle = 'rgba(0,0.5)';
ctx.fillRect(0,ctx.canvas.height);
// draw selection
selectObj.draw();
canvas.mousedown(canvasMouseDown);
canvas.on("touchstart",canvasMouseDown);
};
var createSelection = function (x,height) {
var content = $("#imagePreview");
x = x || Math.ceil((content.width() - width) / 2);
y = y || Math.ceil((content.height() - height) / 2);
return new Selection(x,height);
};
var ctx = canvas[0].getContext("2d");
var iMouseX = 1;
var iMouseY = 1;
var image = new Image();
image.onload = function () {
selectObj = createSelection(x,height);
canvas.data("select",
h: selectObj.h
});
drawScene();
};
image.src = imageSource;
canvas.mousemove(canvasMouseMove);
canvas.on("touchmove",canvasMouseMove);
var StopSelect = function (e) {
var canvasOffset = $(canvas).offset();
var pageX = e.pageX || event.targettouches[0].pageX;
var pageY = 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 (var i = 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) {
var tmpCanvas = $("")[0];
var tmpCtx = 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,selectObj.h);
if (document.getElementById(previewID)) {
document.getElementById(previewID).src = tmpCanvas.toDataURL();
document.getElementById(previewID).style.border = "1px solid #ccc";
}
return tmpCanvas.toDataURL();
}
};
}
function autoResizeImage(maxWidth,maxHeight,objImg) {
var img = new Image();
img.src = objImg.src;
var hRatio;
var wRatio;
var ratio = 1;
var w = objImg.width;
var h = objImg.height;
wRatio = maxWidth / w;
hRatio = maxHeight / h;
if (w < maxWidth && h < maxHeight) {
return;
}
if (maxWidth == 0 && maxHeight == 0) {
ratio = 1;
} else if (maxWidth == 0) {
if (hRatio < 1) {
ratio = hRatio;
}
} else if (maxHeight == 0) {
if (wRatio < 1) {
ratio = wRatio;
}
} else if (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;
}
小伙伴们拿去试试吧，希望大家能够喜欢，有疑问就给我留言吧。
