使用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  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;
}
    

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

HTML5 canvas渐进填充与透明实现图像的Mask效果

如何使用canvas实现图片马赛克

以上就是使用JavaScript和canvas实现图片的裁剪的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！