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 < 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, 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 < 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 = $("<canvas></canvas>")[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 < 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;}
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
html5 canvas渐进填充与透明实现图像的mask效果
如何使用canvas实现图片马赛克
以上就是使用javascript和canvas实现图片的裁剪的详细内容。