JavaScript canvas_jquery를 사용하여 이미지 자르기

캔버스는 스크립트를 사용하여 그림을 그릴 수 있는 태그이며 일련의 완전한 속성과 메서드를 제공합니다. 이를 사용하여 그래픽 그리기, 이미지 처리, 심지어 간단한 애니메이션 및 게임 제작도 수행할 수 있습니다.

캔버스 태그에는 캔버스의 너비와 높이를 설정하는 데 사용되는 너비와 높이의 두 가지 속성만 있습니다. 태그 속성이나 스크립트를 통해 설정하지 않은 경우 기본값은 300*150입니다.

자, 캔버스에 대한 소개는 먼저 캔버스와 결합된 자바스크립트를 사용하여 이미지를 자르는 코드를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

var selectObj = null;
function ImageCrop(canvasId, imageSource, x, y, 너비, 높이) {
    var 캔버스 = $("#" canvasId);
    if (canvas.length == 0 && imageSource) {
        반품;
    }
    함수 canvasMouseDown(e) {
        StopSelect(e);
        canvas.css("cursor", "default");
    }
    함수 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("커서", "이동");
            canvas.data("드래그", 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;
            내 = ctx.canvas.height - selectObj.h;
            cy = cy > 나의 ? 내 : cy;
            selectObj.y = cy;
        }
        for (var i = 0; i             selectObj.bHow[i] = false;
            selectObj.iCSize[i] = selectObj.csize;
        }
        // 크기 조정 큐브 위로 마우스를 가져가세요
        if (iMouseX > selectObj.x - selectObj.csizeh && iMouseX < selectObj.x selectObj.csizeh &&
            iMouseY > selectObj.y - selectObj.csizeh && iMouseY < selectObj.y selectObj.csizeh) {
            canvas.css("커서", "포인터");
            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("커서", "포인터");
            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("커서", "포인터");
            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("커서", "포인터");
            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("커서", "이동");
        }
        // 크기 조정 큐브를 드래그하는 경우
        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("드래그", 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("드래그", true);
        }
        if (selectObj.bDrag[2]) {
            iFX = selectObj.x;
            iFY = selectObj.y;
            iFW = iMouseX - selectObj.px - iFX;
            iFH = iMouseY - selectObj.py - iFY;
            canvas.data("드래그", 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("드래그", true);
        }
        if (iFW > selectObj.csizeh * 2 && iFH > selectObj.csizeh * 2) {
            selectObj.w = iFW;
            selectObj.h = iFH;
            selectObj.x = iFX;
            selectObj.y = iFY;
        }
        drawScene();
    }
    함수 canvasMouseOut() {
        $(canvas).trigger("mouseup");
    }
    함수 canvasMouseUp() {
        selectObj.bDragAll = false;
        for (var i = 0; i < 4; i ) {
            selectObj.bDrag[i] = false;
        }
        canvas.css("cursor", "default");
        canvas.data("선택", {
            x: selectObj.x,
            y: selectObj.y,
            w: selectObj.w,
            h: selectObj.h
        });
        selectObj.px = 0;
        selectObj.py = 0;
    }
    함수 선택(x, y, w, h) {
        this.x = x; // 초기 위치
        this.y = y;
        this.w = w; // 및 크기
        this.h = h;
        this.px = x; // 드래그 계산을 위한 추가 변수
        this.py = y;
        this.csize = 4; // 큐브 크기 조정
        this.csizeh = 6; // 큐브 크기 조정(마우스를 올리면)
        this.bHow = [거짓, 거짓, 거짓, 거짓]; // 호버 상태
        this.iCSize = [this.csize, this.csize, this.csize, this.csize]; // 큐브 크기 조정
        this.bDrag = [false, false, false, false]; // 드래그 상태
        this.bDragAll = 거짓; // 전체 선택 항목 드래그
    }
    Selection.prototype.draw = 함수 () {
        ctx.StrokeStyle = '#666';
        ctx.lineWidth = 2;
        ctx.StrokeRect(this.x, this.y, this.w, this.h);
        //원본 이미지의 일부 그리기
        if (this.w > 0 && this.h > 0) {
            ctx.drawImage(이미지, this.x, this.y, this.w, this.h, this.x, this.y, this.w, this.h);
        }
        // 크기 조정 큐브 그리기
        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 = 함수 () {
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // 캔버스 지우기
        // 소스 이미지 그리기
        ctx.drawImage(이미지, 0, 0, ctx.canvas.width, ctx.canvas.height);
        //더 어둡게 만듭니다
        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
        ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        // 선택 항목 그리기
        selectObj.draw();
        canvas.mousedown(canvasMouseDown);
        canvas.on("touchstart", canvasMouseDown);
    };
    var createSelection = 함수(x, y, 너비, 높이) {
        var content = $("#imagePreview");
        x = x || Math.ceil((content.width() - 너비) / 2);
        y = y || Math.ceil((content.height() - 높이) / 2);
        새로운 선택 항목(x, y, 너비, 높이)을 반환합니다.
    };
    var ctx = canvas[0].getContext("2d");
    var iMouseX = 1;
    var iMouseY = 1;
    var image = new Image();
    image.onload = 함수 () {
        selectObj = createSelection(x, y, 너비, 높이);
        canvas.data("선택", {
            x: selectObj.x,
            y: selectObj.y,
            w: selectObj.w,
            h: selectObj.h
        });
        drawScene();
    };
    image.src = 이미지소스;
    canvas.mousemove(canvasMouseMove);
    canvas.on("touchmove", canvasMouseMove);
    var StopSelect = 기능 (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 = 함수(previewID) {
        var tmpCanvas = $("")[0];
        var tmpCtx = tmpCanvas.getContext("2d");
        if (tmpCanvas && selectObj) {
            tmpCanvas.width = selectObj.w;
            tmpCanvas.height = selectObj.h;
            tmpCtx.drawImage(이미지, 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 솔리드 #ccc";
            }
            return tmpCanvas.toDataURL();
        }
    };
}
함수 autoResizeImage(maxWidth, maxHeight, objImg) {
    var img = 새 이미지();
    img.src = objImg.src;
    var hRatio;
    var wRatio;
    변수 비율 = 1;
    var w = objImg.width;
    var h = objImg.height;
    wRatio = 최대 너비 / w;
    hRatio = 최대 높이 / h;
    if (w         반품;
    }
    if (maxWidth == 0 && maxHeight == 0) {
        비율 = 1;
    } else if (maxWidth == 0) {
        if (hRatio < 1) {
            비율 = hRatio;
        }
    } else if (최대 높이 == 0) {
        if (wRatio < 1) {
            비율 = wRatio;
        }
    } else if (wRatio         비율 = (wRatio     } 그 밖의 {
        ratio = (wRatio     }
    if (비율         if (비율             비율 = 1 - 비율;
        }
        w = w * 비율;
        h = h * 비율;
    }
    objImg.height = h;
    objImg.width = w;
}

small伙伴们拿去试试吧,希望大家能够喜欢，有疑问就给我留言吧。