上传图片 裁剪工具 cropper工具类
需要使用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);
}
});
});
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [翻译] 为什么 Tracebit 用 C# 开发
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· 2分钟学会 DeepSeek API,竟然比官方更好用!
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
· 刚刚!百度搜索“换脑”引爆AI圈,正式接入DeepSeek R1满血版