Bildzuschnitt mit JavaScript-canvas_jquery

Canvas ist ein Tag, der es uns ermöglicht, mithilfe von Skripten zu zeichnen. Es bietet eine vollständige Reihe von Eigenschaften und Methoden. Damit können wir Grafikzeichnungen, Bildverarbeitung und sogar einfache Animationen und Spiele produzieren.

Das Canvas-Tag hat nur zwei Attribute: Breite und Höhe, die zum Festlegen der Breite und Höhe der Leinwand verwendet werden. Wenn sie nicht über Tag-Attribute oder Skripte festgelegt werden, ist der Standardwert 300*150;

Okay, hier ist zunächst die Einführung in Canvas. Schauen wir uns den Code zum Zuschneiden von Bildern mit Javascript in Kombination mit Canvas an:

Code kopieren Der Code lautet wie folgt:

var selectObj = null;
Funktion ImageCrop(canvasId, imageSource, x, y, width, height) {
    var Canvas = $("#" CanvasId);
    if (canvas.length == 0 && imageSource) {
        zurück;
    }
    Funktion canvasMouseDown(e) {
        StopSelect(e);
        canvas.css("cursor", "default");
    }
    Funktion 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 > Mein ? mein: cy;
            selectObj.y = cy;
        }
        für (var i = 0; i < 4; i ) {
            selectObj.bHow[i] = false;
            selectObj.iCSize[i] = selectObj.csize;
        }
        // Bewegen Sie den Mauszeiger über Würfel zur Größenänderung
        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");
        }
        // beim Ziehen von Größenänderungswürfeln
        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();
    }
    Funktion canvasMouseOut() {
        $(canvas).trigger("mouseup");
    }
    Funktion canvasMouseUp() {
        selectObj.bDragAll = false;
        für (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;
    }
    Funktion Selection(x, y, w, h) {
        this.x = x; // Anfangspositionen
        this.y = y;
        this.w = w; // und Größe
        this.h = h;
        this.px = x; // zusätzliche Variablen zum Ziehen von Berechnungen
        this.py = y;
        this.csize = 4; // Würfelgröße ändern
        this.csizeh = 6; // Würfelgröße ändern (beim Schweben)
        this.bHow = [falsch, falsch, falsch, falsch]; // Hover-Status
        this.iCSize = [this.csize, this.csize, this.csize, this.csize]; // Größe der Würfel ändern
        this.bDrag = [false, false, false, false]; // Status ziehen
        this.bDragAll = false; // Ganze Auswahl ziehen
    }
    Selection.prototype.draw = function () {
        ctx.StrokeStyle = '#666';
        ctx.lineWidth = 2;
        ctx.StrokeRect(this.x, this.y, this.w, this.h);
        // Teil des Originalbildes zeichnen
        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);
        }
        // Würfel mit Größenänderung zeichnen
        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); // klare Leinwand
        // Quellbild zeichnen
        ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height);
        // und dunkler machen
        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
        ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        // Auswahl zeichnen
        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);
        neue Auswahl(x, y, Breite, Höhe) zurückgeben;
    };
    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 = Funktion (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;
        }
        für (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();
        >
    };
>
fonction autoResizeImage (maxWidth, maxHeight, objImg) {
    var img = nouvelle image();
    img.src = objImg.src;
    var hRatio;
    var wRatio;
    rapport var = 1;
    var w = objImg.width;
    var h = objImg.hauteur;
    wRatio = maxWidth / w;
    hRatio = hauteurmax / h;
    if (w < maxWidth && h < maxHeight) {
        revenir ;
    >
    if (maxWidth == 0 && maxHeight == 0) {
        rapport = 1;
    } sinon if (maxWidth == 0) {
        si (hRatio < 1) {
            ratio = hRatio;
        >
    } sinon if (maxHeight == 0) {
        si (wRatio < 1) {
            rapport = wRatio;
        >
    } sinon si (wRatio < 1 || hRatio < 1) {
        ratio = (wRatio <= hRatio ? wRatio : hRatio);
    } autre {
        ratio = (wRatio <= hRatio ? wRatio : hRatio) - Math.floor(wRatio <= hRatio ? wRatio : hRatio);
    >
    si (rapport < 1) {
        if (rapport < 0,5 && w < maxWidth && h < maxHeight) {
            rapport = 1 - rapport;
        >
        w = w * rapport ;
        h = h * rapport ;
    >
    objImg.hauteur = h;
    objImg.width = w;
>

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