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.
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>
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>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);
});
}Akhir sekali, kita perlu menambah beberapa gaya untuk mencantikkan halaman. Tambahkan kod berikut dalam teg