使用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 = &#39;#666&#39;;        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 = &#39;#999&#39;;        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 = &#39;rgba(0, 0, 0, 0.5)&#39;;        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;}