layui cropper
时间: 2023-12-10 16:35:31 浏览: 33
根据提供的引用内容,LayUI Cropper是一个基于LayUI框架的图片裁剪组件。它可以让用户在上传图片后进行裁剪、旋转、缩放等操作,最终输出裁剪后的图片。下面是一个使用LayUI Cropper的示例代码:
```html
<div class="layui-upload">
<button type="button" class="layui-btn" id="upload">上传图片</button>
<div class="layui-upload-list">
<img class="layui-upload-img" id="demo1">
</div>
</div>
<script>
layui.use(['upload', 'croppers'], function(){
var upload = layui.upload;
var croppers = layui.croppers;
//执行实例
var uploadInst = upload.render({
elem: '#upload',
url: '/upload/',
acceptMime: 'image/*',
done: function(res){
if(res.code == 0){
initCropper(res.data.src);
}
}
});
function initCropper(src){
croppers.render({
elem: '#demo1',
src: src,
done: function(res){
console.log(res);
}
});
}
});
</script>
```
在这个示例中,我们首先使用LayUI的upload模块来渲染上传图片的界面。当用户上传图片完成后,我们会调用done回调函数,并将上传成功后的图片地址传递给initCropper()方法。在initCropper()方法中,我们使用croppers模块提供的API来完成图片的裁剪、旋转、缩放等操作。最终,我们可以通过调用cropper('getCroppedCanvas')方法来获取裁剪后的图片,并将其展示在页面上。