canvas是一个可以让我们使用脚本绘图的标签，它提供了一系列完整的属性和方法。我们可以借此来实现图形绘制，图像处理甚至实现简单的动画和游戏制作。
canvas标签只有两个属性：width和height，用来设定画布的宽和高，如果没有通过标签属性或者脚本来设置，默认为300*150;
好了，canvas的介绍就先到这里，下面我们来看看javascript结合canvas实现图片的裁剪代码：
复制代码 代码如下:
var selectobj = null;
function imagecrop(canvasid, imagesource, x, y, width, height) {
var canvas = $(# + canvasid);
if (canvas.length == 0 && imagesource) {
return;
}
function canvasmousedown(e) {
stopselect(e);
canvas.css(cursor, default);
}
function canvasmousemove(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);
canvas.css(cursor, default);
if (selectobj.bdragall) {
canvas.css(cursor, move);
canvas.data(drag, true);
var cx = imousex - selectobj.px;
cx = cx mx = ctx.canvas.width - selectobj.w;
cx = cx > mx ? mx : cx;
selectobj.x = cx;
var cy = imousey - selectobj.py;
cy = cy my = ctx.canvas.height - selectobj.h;
cy = cy > my ? my : cy;
selectobj.y = cy;
}
for (var i = 0; i selectobj.bhow[i] = false;
selectobj.icsize[i] = selectobj.csize;
}
// hovering over resize cubes
if (imousex > selectobj.x - selectobj.csizeh && imousex imousey > selectobj.y - selectobj.csizeh && imousey canvas.css(cursor, pointer);
selectobj.bhow[0] = true;
selectobj.icsize[0] = selectobj.csizeh;
}
if (imousex > selectobj.x + selectobj.w - selectobj.csizeh && imousex imousey > selectobj.y - selectobj.csizeh && imousey canvas.css(cursor, pointer);
selectobj.bhow[1] = true;
selectobj.icsize[1] = selectobj.csizeh;
}
if (imousex > selectobj.x + selectobj.w - selectobj.csizeh && imousex imousey > selectobj.y + selectobj.h - selectobj.csizeh && imousey canvas.css(cursor, pointer);
selectobj.bhow[2] = true;
selectobj.icsize[2] = selectobj.csizeh;
}
if (imousex > selectobj.x - selectobj.csizeh && imousex imousey > selectobj.y + selectobj.h - selectobj.csizeh && imousey canvas.css(cursor, pointer);
selectobj.bhow[3] = true;
selectobj.icsize[3] = selectobj.csizeh;
}
if (imousex > selectobj.x && imousex selectobj.y && imousey 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 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, y, 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, false]; // hover statuses
this.icsize = [this.csize, this.csize, this.csize, this.csize]; // resize cubes sizes
this.bdrag = [false, false, 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.y, this.w, this.h, this.x, this.y, this.w, 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, 0, ctx.canvas.width, ctx.canvas.height); // clear canvas
// draw source image
ctx.drawimage(image, 0, 0, ctx.canvas.width, ctx.canvas.height);
// and make it darker
ctx.fillstyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillrect(0, 0, ctx.canvas.width, ctx.canvas.height);
// draw selection
selectobj.draw();
canvas.mousedown(canvasmousedown);
canvas.on(touchstart, canvasmousedown);
};
var createselection = function (x, y, width, height) {
var content = $(#imagepreview);
x = x || math.ceil((content.width() - width) / 2);
y = y || math.ceil((content.height() - height) / 2);
return new selection(x, y, width, height);
};
var ctx = canvas[0].getcontext(2d);
var imousex = 1;
var imousey = 1;
var image = new image();
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);
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 imousey > selectobj.y + selectobj.csizeh &&
imousey selectobj.bdragall = true;
}
for (var i = 0; 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, 0, 0, selectobj.w, 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 return;
}
if (maxwidth == 0 && maxheight == 0) {
ratio = 1;
} else if (maxwidth == 0) {
if (hratio ratio = hratio;
}
} else if (maxheight == 0) {
if (wratio ratio = wratio;
}
} else if (wratio ratio = (wratio } else {
ratio = (wratio }
if (ratio if (ratio ratio = 1 - ratio;
}
w = w * ratio;
h = h * ratio;
}
objimg.height = h;
objimg.width = w;
}
小伙伴们拿去试试吧，希望大家能够喜欢，有疑问就给我留言吧。