layui 第三方组件平台

返回首页 发布组件

集成cropper,jquery,layui的简单裁剪图片的组件,可以自定义上传图片的尺寸,比例等信息,及其裁剪上传后可以回显裁剪后的图片。支持一个界面上多个裁剪组件。

创建:2019-8-30

文档

#使用方法超级简单
一. 为一个按钮绑定easyCropper组件
<div class="layui-form-item">
<label class="layui-form-label"><i style="color: red">*</i>产品图片:</label>
<input type="hidden" name="productImg" id="productImg"/>
<div class="layui-upload">
<button type="button" class="layui-btn" id="productImgButton">上传</button>
<div class="layui-upload-list">
<img class="layui-upload-img" id="productImgImg">
</div>
</div>
</div>
二. layui初始化时引入easyCropper

 layui.config({
base: contextPath + 'layui/easyCropper/' //layui自定义layui组件目录
})
layui.use(['easyCropper'], function(){

var easyCropper = layui.easyCropper;
//创建一个图片裁剪上传组件
var productImgCropper = easyCropper.render({
elem: '#productImgButton'
,saveW:280 //保存宽度
,saveH:160 //保存高度
,mark:7/4 //选取比例
,area:'900px' //弹窗宽度
,url: contextPath + 'upload/img' //图片上传接口返回和(layui 的upload 模块)返回的JOSN一样
,done: function(url){ //上传完毕回调
$("#productImg").val(url);
$("#productImgImg").attr('src',url);
}
});
})
三. 然后将组件的文件夹easyCropper放到能找到的文件夹下即可,我这边是放在layui下面

下载

去码云下载
该扩展组件由第三方用户主动投递,并由其自身进行维护,本站仅做收集。