Pemotongan imej menggunakan JavaScript canvas_jquery

Kanvas ialah tag yang membolehkan kami melukis menggunakan skrip Ia menyediakan satu siri sifat dan kaedah yang lengkap. Kita boleh menggunakan ini untuk mencapai lukisan grafik, pemprosesan imej dan juga animasi mudah dan pengeluaran permainan.

Teg kanvas hanya mempunyai dua atribut: lebar dan tinggi, yang digunakan untuk menetapkan lebar dan tinggi kanvas Jika tidak ditetapkan melalui atribut atau skrip teg, lalai ialah 300*150;

Baiklah, pengenalan kepada kanvas ada di sini dahulu Mari kita lihat kod untuk memangkas imej menggunakan javascript digabungkan dengan kanvas:

Salin kod Kod adalah seperti berikut:

var selectObj = null;
fungsi ImageCrop(canvasId, imageSource, x, y, lebar, tinggi) {
    var canvas = $("#" canvasId);
    if (canvas.length == 0 && imageSource) {
        kembali;
    }
    fungsi canvasMouseDown(e) {
        StopSelect(e);
        canvas.css("kursor", "lalai");
    }
    fungsi 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("kursor", "lalai");
        jika (pilihObj.bDragAll) {
            canvas.css("kursor", "move");
            canvas.data("drag", true);
            var cx = iMouseX - selectObj.px;
            cx = cx < 0 ? 0 : cx;
            mx = ctx.canvas.width - pilihObj.w;
            cx = cx > mx ? mx : cx;
            selectObj.x = cx;
            var cy = iMouseY - selectObj.py;
            cy = cy < 0 ? 0 : cy;
            my = ctx.canvas.height - pilihObj.h;
            cy = cy > saya ? saya : cy;
            selectObj.y = cy;
        }
        untuk (var i = 0; i < 4; i ) {
            selectObj.bHow[i] = palsu;
            selectObj.iCSize[i] = pilihObj.csize;
        }
        // melayang di atas kiub ubah saiz
        jika (iMouseX > selectObj.x - selectObj.csizeh && iMouseX < selectObj.x selectObj.csizeh &&
            iMouseY > selectObj.y - selectObj.csizeh && iMouseY < selectObj.y selectObj.csizeh) {
            canvas.css("kursor", "penunjuk");
            selectObj.bHow[0] = benar;
            selectObj.iCSize[0] = selectObj.csizeh;
        }
        jika (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("kursor", "penunjuk");
            selectObj.bHow[1] = benar;
            selectObj.iCSize[1] = selectObj.csizeh;
        }
        jika (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("kursor", "penunjuk");
            selectObj.bHow[2] = benar;
            selectObj.iCSize[2] = selectObj.csizeh;
        }
        jika (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("kursor", "penunjuk");
            selectObj.bHow[3] = benar;
            selectObj.iCSize[3] = selectObj.csizeh;
        }
        jika (iMouseX > selectObj.x && iMouseX < selectObj.x selectObj.w && iMouseY > selectObj.y && iMouseY < selectObj.y selectObj.h) {
            canvas.css("kursor", "move");
        }
        // sekiranya berlaku penyeretan kiub ubah saiz
        var iFW, iFH, iFX, iFY, mx, my;
        jika (pilihObj.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);
        }
        jika (pilihObj.bDrag[1]) {
            iFX = selectObj.x;
            iFY = iMouseY - selectObj.py;
            iFW = iMouseX - selectObj.px - iFX;
            iFH = selectObj.h selectObj.y - iFY;
            canvas.data("drag", true);
        }
        jika (pilihObj.bDrag[2]) {
            iFX = selectObj.x;
            iFY = selectObj.y;
            iFW = iMouseX - selectObj.px - iFX;
            iFH = iMouseY - selectObj.py - iFY;
            canvas.data("drag", true);
        }
        jika (pilihObj.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();
    }
    fungsi canvasMouseOut() {
        $(kanvas).trigger("mouseup");
    }
    fungsi canvasMouseUp() {
        selectObj.bDragAll = palsu;
        untuk (var i = 0; i < 4; i ) {
            selectObj.bDrag[i] = palsu;
        }
        canvas.css("kursor", "lalai");
        canvas.data("pilih", {
            x: pilihObj.x,
            y: pilihObj.y,
            w: pilihObj.w,
            h: pilihObj.h
        });
        selectObj.px = 0;
        selectObj.py = 0;
    }
    Fungsi Pemilihan(x, y, w, h) {
        ini.x = x; // kedudukan awal
        ini.y = y;
        ini.w = w; // dan saiz
        ini.h = h;
        this.px = x; // pembolehubah tambahan untuk menyeret pengiraan
        this.py = y;
        this.csize = 4; // ubah saiz saiz kiub
        this.csizeh = 6; // ubah saiz saiz kiub (di tuding)
        this.bHow = [salah, palsu, palsu, palsu]; // tuding status
        this.iCSize = [this.csize, this.csize, this.csize, this.csize]; // ubah saiz saiz kiub
        this.bDrag = [false, false, false, false]; // status seret
        this.bDragAll = palsu; // seret keseluruhan pilihan
    }
    Selection.prototype.draw = fungsi () {
        ctx.strokeStyle = '#666';
        ctx.lineWidth = 2;
        ctx.strokeRect(this.x, this.y, this.w, this.h);
        // lukis sebahagian daripada imej asal
        jika (ini.w > 0 && this.h > 0) {
            ctx.drawImage(imej, ini.x, ini.y, ini.w, ini.h, ini.x, ini.y, ini.w, ini.h);
        }
        // lukis kiub ubah saiz
        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 = fungsi () {
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // kanvas yang jelas
        // lukis imej sumber
        ctx.drawImage(imej, 0, 0, ctx.canvas.width, ctx.canvas.height);
        // dan menjadikannya lebih gelap
        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
        ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        // lukis pilihan
        pilihObj.draw();
        canvas.mousedown(canvasMouseDown);
        canvas.on("touchstart", canvasMouseDown);
    };
    var createSelection = fungsi (x, y, lebar, tinggi) {
        var content = $("#imagePreview");
        x = x || Math.ceil((content.width() - width) / 2);
        y = y || Math.ceil((content.height() - height) / 2);
        kembalikan Pilihan baharu(x, y, lebar, tinggi);
    };
    var ctx = canvas[0].getContext("2d");
    var iMouseX = 1;
    var iMouseY = 1;
    imej var = Imej baharu();
    image.onload = fungsi () {
        selectObj = createSelection(x, y, lebar, tinggi);
        canvas.data("pilih", {
            x: pilihObj.x,
            y: pilihObj.y,
            w: pilihObj.w,
            h: pilihObj.h
        });
        drawScene();
    };
    image.src = imageSource;
    canvas.mousemove(canvasMouseMove);
    canvas.on("touchmove", canvasMouseMove);
    var StopSelect = fungsi (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;
        jika (pilihObj.bHow[0]) {
            selectObj.px = iMouseX - selectObj.x;
            selectObj.py = iMouseY - selectObj.y;
        }
        jika (pilihObj.bHow[1]) {
            selectObj.px = iMouseX - selectObj.x - selectObj.w;
            selectObj.py = iMouseY - selectObj.y;
        }
        jika (pilihObj.bHow[2]) {
            selectObj.px = iMouseX - selectObj.x - selectObj.w;
            selectObj.py = iMouseY - selectObj.y - selectObj.h;
        }
        jika (pilihObj.bHow[3]) {
            selectObj.px = iMouseX - selectObj.x;
            selectObj.py = iMouseY - selectObj.y - selectObj.h;
        }
        jika (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 = benar;
        }
        untuk (var i = 0; i < 4; i ) {
            jika (pilihObj.bBagaimana[i]) {
                selectObj.bDrag[i] = benar;
            }
        }
    };
    canvas.mouseout(canvasMouseOut);
    canvas.mouseup(canvasMouseUp);
    canvas.on("touchend", canvasMouseUp);
    this.getImageData = fungsi (previewID) {
        var tmpCanvas = $("")[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";
            }
            Rückkehr tmpCanvas.toDataURL();
        }
    };
}
Funktion autoResizeImage(maxWidth, maxHeight, objImg) {
    var img = new Image();
    img.src = objImg.src;
    var hRatio;
    var wRatio;
    Var-Verhältnis = 1;
    var w = objImg.width;
    var h = objImg.height;
    wRatio = maxWidth / w;
    hRatio = maxHeight / h;
    if (w < maxWidth && h < maxHeight) {
        zurück;
    }
    if (maxWidth == 0 && maxHeight == 0) {
        Verhältnis = 1;
    } else if (maxWidth == 0) {
        if (hRatio < 1) {
            Verhältnis = hRatio;
        }
    } else if (maxHeight == 0) {
        if (wRatio < 1) {
            Verhältnis = wRatio;
        }
    } else if (wRatio < 1 || hRatio < 1) {
        Verhältnis = (wRatio <= hRatio ? wRatio : hRatio);
    } sonst {
        ratio = (wRatio <= hRatio ? wRatio : hRatio) - Math.floor(wRatio <= hRatio ? wRatio : hRatio);
    }
    if (Verhältnis < 1) {
        if (ratio < 0,5 && w < maxWidth && h < maxHeight) {
            Verhältnis = 1 - Verhältnis;
        }
        w = w * Verhältnis;
        h = h * Verhältnis;
    }
    objImg.height = h;
    objImg.width = w;
}

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