有的朋友可能对于“使用JavaScript和canvas实现图片的裁剪 canvas可以实现图片的裁剪吗”还有很多不明白的地方，下面由77ISP云服务器技术小编为大家讲解一下，下面我们来一起看看吧！

这篇文章主要介绍了使用JavaScript+canvas实现图片裁剪的方法,需要的朋友可以参考下

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 ? mx : cx;
            selectObj.x = cx;
            var cy = iMouseY - selectObj.py;
            cy = cy  my ? my : cy;
            selectObj.y = cy;
        }
        for (var i = 0; i  selectObj.x - selectObj.csizeh && iMouseX  selectObj.y - selectObj.csizeh && iMouseY  selectObj.x + selectObj.w - selectObj.csizeh && iMouseX  selectObj.y - selectObj.csizeh && iMouseY  selectObj.x + selectObj.w - selectObj.csizeh && iMouseX  selectObj.y + selectObj.h - selectObj.csizeh && iMouseY  selectObj.x - selectObj.csizeh && iMouseX  selectObj.y + selectObj.h - selectObj.csizeh && iMouseY  selectObj.x && iMouseX  selectObj.y && iMouseY  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  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.y + selectObj.csizeh &&
            iMouseY ")[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

以上就是“使用JavaScript和canvas实现图片的裁剪 canvas可以实现图片的裁剪吗”的详细内容，更多请关注77isp云服务器技术网其它相关文章！