上传图片 裁剪工具 cropper工具类
程序员文章站
2022-04-09 09:14:00
...
需要使用layui配合使用开发
<div class="layui-form-item" style="margin-left:110px">
<div class="layui-upload">
<div class="layui-upload-list">
<img id="srcimgurl" data="0" οnerrοr="this.src='images/nopic.jpg'" style="height: 80px;width: 80px;margin-top: -25px;" >
<p id="demoText"></p>
</div>
</div>
</div>
//创建一个裁剪图片的实例
layui.config({
base: '../layui/cropper/' //layui自定义layui组件目录
}).use(['form','croppers'], function () {
var $ = layui.jquery
,form = layui.form
,croppers = layui.croppers
,layer= layui.layer;
//创建一个头像上传组件
croppers.render({
elem: '#editimg',
saveW:250, //保存宽度
saveH:250,
autoCrop:true,
mark:1/1, //选取比例 保存大小固定 去掉可以*裁剪
area:['900px','600px'], //弹窗宽度
url: "/imagesave", //图片上传接口返回和(layui 的upload 模块)返回的JOSN一样
done: function(url){ //上传完毕回调
$("#inputimgurl").val(url);
$("#srcimgurl").attr('src',url);
}
});
});