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

.demo {
  width: 600px;
}

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

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

#crop {
  margin-top: 10px;
}

Pada ketika ini, kami telah menyelesaikan menulis kod untuk menggunakan Layui untuk melaksanakan fungsi pemangkasan imej seret dan lepas. Seterusnya, kita perlu mengkonfigurasi kod sisi pelayan untuk menerima imej yang dimuat naik dan mengembalikan imej yang dipotong.

Ringkasan:

Artikel ini memperkenalkan cara menggunakan rangka kerja Layui untuk melaksanakan fungsi pemangkasan imej seret dan lepas. Fungsi ini boleh dilaksanakan dengan cepat dengan memperkenalkan rangka kerja Layui dan perpustakaan berkaitan, mencipta struktur HTML, menulis kod JavaScript dan menambah gaya. Semoga artikel ini bermanfaat kepada semua. Jika anda mempunyai sebarang pertanyaan, sila tinggalkan mesej untuk perbincangan.

Atas ialah kandungan terperinci Cara menggunakan Layui untuk melaksanakan fungsi pemangkasan imej seret dan lepas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!