JavaScript Canvas_jquery を使用した画像のトリミング

Canvas は、スクリプトを使用して描画できるようにするタグであり、一連のプロパティとメソッドを提供します。これを使用して、グラフィックスの描画、画像処理、さらには単純なアニメーションやゲームの制作を実現できます。

キャンバス タグには、幅と高さの 2 つの属性しかありません。これらは、タグ属性またはスクリプトを通じて設定されない場合、デフォルトは 300*150 です。

キャンバスの概要はここまでです。JavaScript とキャンバスを組み合わせて画像をトリミングするコードを見てみましょう。

コードをコピー コードは次のとおりです:

var selectObj = null;
function ImageCrop(canvasId, imageSource, x, y, width, height) {
    var Canvas = $("#" CanvasId);
    if (canvas.length == 0 && imageSource) {
        戻る;
    }
    関数 CanvasMouseDown(e) {
        StopSelect(e);
        Canvas.css("カーソル", "デフォルト");
    }
    関数 CanvasMouseMove(e) {
        var CanvasOffset = Canvas.offset();
        var pageX = e.pageX ||イベント.targetTouches[0].pageX;
        var pageY = e.pageY ||イベント.targetTouches[0].pageY;
        iMouseX = Math.floor(pageX - CanvasOffset.left);
        iMouseY = Math.floor(pageY - CanvasOffset.top);
        Canvas.css("カーソル", "デフォルト");
        if (selectObj.bDragAll) {
            Canvas.css("カーソル", "移動");
            Canvas.data("ドラッグ", true);
            var cx = iMouseX - selectObj.px;
            cx = cx             mx = ctx.canvas.width - selectObj.w;
            cx = cx > MX? mx : cx;
            selectObj.x = cx;
            var cy = iMouseY - selectObj.py;
            cy = cy             my = 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("カーソル", "デフォルト");
        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;
        これ.w = w; // とサイズ
        this.h = h;
        this.px = x; // ドラッグ計算に追加の変数
        this.py = y;
        this.csize = 4; // キューブのサイズを変更します
        this.csizeh = 6; // キューブのサイズを変更します (カーソルを置いたときに)
        this.bHow = [false, false, false, false]; // ホバーステータス
        this.iCSize = [この.csize, this.csize, this.csize, this.csize]; // キューブのサイズを変更します
        this.bDrag = [false, false, false, false]; // ステータスをドラッグ
        this.bDragAll = false; // 選択範囲全体をドラッグします
    }
    Selection.prototype.draw = function () {
        ctx.ストロークスタイル = '#666';
        ctx.lineWidth = 2;
        ctx.ストロークRect(this.x, this.y, this.w, this.h);
        // 元画像の一部を描画
        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);
        }
        // サイズ変更立方体を描画します
        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);
    };
    vardrawScene = function () {
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // キャンバスをクリア
        // ソース画像を描画
        ctx.drawImage(image, 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("タッチスタート", 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() - 身長) / 2);
        新しい選択範囲(x, y, 幅, 高さ)を返します;
    };
    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("選択", {
            x: selectObj.x,
            y: selectObj.y,
            w: selectObj.w,
            h: selectObj.h
        });
        drawScene();
    };
    image.src = imageSource;
    Canvas.mousemove(canvasMouseMove);
    Canvas.on("タッチムーブ", CanvasMouseMove);
    var StopSelect = function (e) {
        var CanvasOffset = $(canvas).offset();
        var pageX = e.pageX ||イベント.targetTouches[0].pageX;
        var pageY = e.pageY ||イベント.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("タッチエンド", CanvasMouseUp);
    this.getImageData = 関数 (プレビューID) {
        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(プレビューID).src = tmpCanvas.toDataURL();
                document.getElementById(previewID).style.border = "1px ソリッド #ccc";
            }
            return tmpCanvas.toDataURL();
        }
    };
}
function autoResizeImage(maxWidth, maxHeight, objImg) {
    var img = 新しい画像();
    img.src = objImg.src;
    var hRatio;
    var wRatio;
    var 比率 = 1;
    var w = objImg.width;
    var h = objImg.height;
    wRatio = maxWidth / w;
    hRatio = maxHeight / h;
    if (w < maxWidth && h < maxHeight) {
        戻る;
    }
    if (maxWidth == 0 && maxHeight == 0) {
        比率 = 1;
    } else if (maxWidth == 0) {
        if (hRatio             比率 = hRatio;
        }
    } else if (maxHeight == 0) {
        if (wRatio             比率 = wRatio;
        }
    } else if (wRatio         比率 = (wRatio     } else {
        rate = (wRatio     }
    if (比率         if (比率             比率 = 1 - 比率;
        }
        w = w * 比率;
        h = h * 比率;
    }
    objImg.height = h;
    objImg.width = w;
}

小さなパートナーは試行を去ります、大家が喜望できることを望んでいます、私は疑念を持っています。