Layuiを使用してドラッグアンドドロップ画像トリミング機能を実装する方法

Layui を使用してドラッグ アンド ドロップ画像トリミング機能を実装する方法

モバイル インターネットの急速な発展に伴い、画像トリミング機能はさまざまな用途で広く使用されています。製品。ドラッグ アンド ドロップによる画像トリミング機能を実装するには、優れたフロントエンド開発フレームワークである Layui を使用して、開発プロセスを簡素化できます。この記事では、Layui を使用してドラッグ可能な画像のトリミング機能を実装する方法と、具体的なコード例を紹介します。

1. Layui フレームワークと関連ライブラリの紹介

ドラッグ アンド ドロップ画像トリミング機能を実装する前に、Layui フレームワークと関連ライブラリを紹介する必要があります。まず、HTML ファイルの

タグに次のコードを追加します:

<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>

2. HTML 構造の作成

次に、HTML 構造を作成する必要があります。画像とクロップボックスを表示します。次のコードを

タグに追加します:

<div class="demo" style="margin:20px;">
  <div class="layui-upload">
    <button type="button" class="layui-btn" id="upload">上传图片</button>
    <button type="button" class="layui-btn" id="cut">裁剪图片</button>
  </div>
  <div class="layui-upload-img" id="image-container"></div>
  <div class="layui-row layui-col-space10" id="crop-container"></div>
</div>

3. JavaScript コードの記述

HTML 構造に、画像のアップロードと画像のトリミングのためのボタンを追加しました。画像を表示するためのコンテナ (ID は image-container) と、クロップ ボックスを表示するためのコンテナ (ID は Crop-container)。次に、画像のアップロード、表示、トリミング機能を実装するための JavaScript コードを作成する必要があります。 <script> タグに次のコードを追加します: </script>

layui.use('upload', function(){
  var upload = layui.upload;

  //执行实例
  var uploadInst = upload.render({
    elem: '#upload',
    url: '/upload/',
    done: function(res){
      //上传完毕回调
      if(res.code == 0){
        //显示图片
        $("#image-container").html('<img  src="' + res.data.src + '" class="layui-upload-img" alt="Layuiを使用してドラッグアンドドロップ画像トリミング機能を実装する方法" >');
        //裁剪图片
        initCrop(res.data.src);
      }
    }
  });
});

//初始化裁剪框
function initCrop(src) {
  layui.use(['slider', 'cropper'], function(){
    var slider = layui.slider, cropper = layui.cropper;

    //添加裁剪框
    $("#crop-container").html('<div id="crop"></div>');

    //创建实例
    var cropperInst = cropper.render({
      elem: '#crop',
      imgSrc: src,
      area: ['400px', '400px'],
      done: function(res){
        //裁剪完毕回调
        console.log(res);
      }
    });
  });
}

//裁剪图片
function cropImage() {
  layui.use('cropper', function(){
    var cropper = layui.cropper;
    //获取裁剪结果
    var result = cropper.getData('#crop');
    console.log(result);
  });
}

4. スタイルの追加

最後に、ページを美しくするためにいくつかのスタイルを追加する必要があります。次のコードを

.demo {
  width: 600px;
}

.layui-upload {
  margin-bottom: 10px;
}

.layui-upload-img {
  margin: 10px 0;
}

#crop {
  margin-top: 10px;
}

この時点で、Layui を使用してドラッグ アンド ドロップ画像トリミング機能を実装するためのコードの作成が完了しました。次に、アップロードされた画像を受信し、トリミングされた画像を返すようにサーバー側のコードを構成する必要があります。

概要:

この記事では、Layui フレームワークを使用してドラッグ アンド ドロップ画像トリミング機能を実装する方法を紹介します。この機能は、Layui フレームワークと関連ライブラリを導入し、HTML 構造を作成し、JavaScript コードを記述し、スタイルを追加することですぐに実装できます。この記事が皆さんのお役に立てば幸いです。ご質問がございましたら、ディスカッションのためにメッセージを残してください。

以上がLayuiを使用してドラッグアンドドロップ画像トリミング機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。