Cara menggunakan Layui untuk melaksanakan fungsi pemangkasan imej seret dan lepas

Cara menggunakan Layui untuk melaksanakan fungsi pemotongan imej drag-and-drop

Dengan perkembangan pesat Internet mudah alih, fungsi pemotongan imej digunakan secara meluas dalam pelbagai produk. Untuk melaksanakan fungsi pemangkasan imej seret dan lepas, kita boleh menggunakan Layui, rangka kerja pembangunan bahagian hadapan yang sangat baik, untuk memudahkan proses pembangunan. Artikel ini akan memperkenalkan cara menggunakan Layui untuk melaksanakan fungsi pemangkasan imej boleh seret, dan memberikan contoh kod khusus.

1. Memperkenalkan rangka kerja Layui dan perpustakaan berkaitan

Sebelum melaksanakan fungsi pemangkasan imej boleh seret, kita perlu memperkenalkan rangka kerja Layui dan perpustakaan berkaitan. Mula-mula, tambah kod berikut dalam teg

pada fail 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. Cipta struktur HTML

Seterusnya, kita perlu mencipta struktur HTML untuk memaparkan imej dan kotak pemangkasan. Tambahkan kod berikut dalam teg :

<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. Tulis kod JavaScript

Dalam struktur HTML, kami menambah butang untuk memuat naik imej dan memangkas imej, dan bekas untuk memaparkan imej (id ialah bekas imej ) dan bekas yang digunakan untuk memaparkan kotak tanaman (id ialah bekas tanaman). Seterusnya, kita perlu menulis kod JavaScript untuk melaksanakan fungsi muat naik, paparan dan pemangkasan imej. Tambahkan kod berikut dalam teg :

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="Cara menggunakan Layui untuk melaksanakan fungsi pemangkasan imej seret dan lepas" >');
        //裁剪图片
        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. Tambah gaya

Akhir sekali, kita perlu menambah beberapa gaya untuk mencantikkan halaman. Tambahkan kod berikut dalam teg