jQueryで画像をトリミングできますか?

JQuery は、Web フロントエンド開発で広く使用されている JavaScript ライブラリであり、ドキュメント オブジェクト モデル (DOM) の操作、イベントの処理、AJAX リクエストの開始、HTML 要素の動的作成などを簡単に実行できる一連の API を提供します。これらの一般的なアプリケーションに加えて、JQuery は画像トリミング プラグインなど、いくつかの便利なプラグインや拡張機能も提供します。

画像のトリミングは、特にユーザーがアップロードした画像をアップロードして処理する必要がある Web サイトやアプリケーションで一般的なニーズです。 JQuery の画像トリミング プラグインを使用すると、複雑な JavaScript や CSS コードを記述することなく、画像を簡単かつシンプルにトリミングできます。

次に、この記事では、JQuery 用の人気のある画像トリミング プラグインと、それらを使用して画像をトリミングする方法を紹介します。

1. JQuery-Cropbox

JQuery-Cropbox は、使いやすく、Web サイトやアプリケーションに簡単に統合できる軽量の JQuery 画像トリミング プラグインです。ズーム、ドラッグ アンド ドロップ、トリミング機能をサポートしており、トリミングされた画像を Base64 または Blob 形式で保存できるため、サーバーへのアップロードや他の API を使用した処理が容易になります。

JQuery-Cropbox を使用する手順は次のとおりです。

まず、必要な依存関係ファイルを HTML ファイルに導入します。

<link rel="stylesheet" href="https://rawgit.com/creativeaura/cropbox/master/demo/cropbox.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://rawgit.com/creativeaura/cropbox/master/demo/cropbox.js"></script>

次に、画像要素をpage:

<img src="image.jpg" id="image" />

次に、JavaScript ファイルの Cropbox 関数を呼び出してプラグインを初期化し、必要なオプションを設定します。

$(function() {
    var options = {
        // 设置裁剪框的宽度和高度
        width: 200,
        height: 200,
        // 设置裁剪后的图像最大宽度和高度
        maxWidth: 800,
        maxHeight: 800,
        // 设置允许缩放的最小和最大比例
        minZoom: 0.1,
        maxZoom: 10,
        // 设置是否允许拖放裁剪框
        enableResize: true,
        // 设置是否允许选择图像区域
        enableSelect: true,
        // 设置是否显示裁剪框
        showControls: true,
        // 设置是否显示裁剪比例选项
        showAspectRatio: true,
        // 设置是否显示预览图像
        preview: '.preview',
        // 设置裁剪后的图像输出格式（Base64 或 Blob）
        outputType: 'blob',
        // 设置裁剪完成后的回调函数
        onCrop: function(data) {
            console.log(data);
        }
    };
    $('#image').cropbox(options);
});

その中で、クロップ ボックスの幅と高さ、最大幅、最大高さ、拡大縮小などのオプションは必要に応じて変更できます。

2. JQuery-Image-Crop

JQuery-Image-Crop は、プレビューを含む高度なカスタマイズと豊富な機能セットを提供する、もう 1 つの人気のある JQuery 画像トリミング プラグインです。 、回転、拡大縮小、透明度やトリミング率の調整など。 JQuery-Cropbox と同様に、JQuery-Image-Crop は、他の API を使用して簡単にアップロードまたは処理できるように、トリミングされた画像を Base64 または Blob 形式に出力できます。

JQuery-Image-Crop を使用する手順は次のとおりです。

まず、必要な依存関係ファイルを HTML ファイルに導入します。

<link rel="stylesheet" href="https://unpkg.com/jquery-image-crop/dist/css/jquery.Jcrop.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://unpkg.com/jquery-image-crop/dist/js/jquery.Jcrop.min.js"></script>

次に、画像要素を作成します。ページ上：

<img src="image.jpg" id="image" />

次に、JavaScript ファイルの Jcrop 関数を呼び出してプラグインを初期化し、必要なオプションを設定します。

$(function () {
    var options = {
        // 设置裁剪框的宽度和高度
        aspectRatio: 1,
        // 设置预览图像的容器元素
        preview: '.jcrop-preview',
        // 设置裁剪完成后的回调函数
        onSelect: function (coords) {
            console.log(coords);
        }
    };
    $("#image").Jcrop(options);
});

その中で、切り抜きの幅と高さボックス、クロップ率、プレビューコンテナ要素などのオプションは必要に応じて変更できます。

一般に、JQuery の画像トリミング プラグインは画像を簡単にトリミングして必要な形式で出力できるため、フロントエンド開発ワークフローが大幅に簡素化され、画像処理がより効率的かつ高速になります。同時に、ユーザーは自分のニーズに応じてさまざまなプラグインを選択し、Web ページやアプリケーションをより適切に提供するために最適なトリミング ツールを選択できます。

以上がjQueryで画像をトリミングできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。