cropper 图片截取(剪裁)上传

讨论 未结
12 249
adminxf
adminxf VIP4 2018-9-12
悬赏:20飞吻
基于layui,根据cropper修改的图片截取(剪裁)上传插件,适用于头像等图片上传。

示例:
html
<div class="layui-form-item">
<label class="layui-form-label">头像</label>
<div class="layui-input-inline">
<input type="text" name="head" lay-verify="required" id="inputimgurl" placeholder="图片地址" value="123.jpg" class="layui-input">
</div>
<div class="layui-input-inline">
<div class="layui-upload-list" style="margin:0">
<img src="123.jpg" id="srcimgurl" class="layui-upload-img">
</div>
</div>
<div class="layui-input-inline layui-btn-container" style="width: auto;">
<button class="layui-btn layui-btn-primary" id="editimg">修改图片</button >
</div>
<div class="layui-form-mid layui-word-aux">头像的尺寸限定150x150px,大小在50kb以内</div>
</div>
js
layui.config({
base: '/static/cropper/' //layui自定义layui组件目录
}).use(['form','croppers'], function () {
var $ = layui.jquery
,form = layui.form
,croppers = layui.croppers
,layer= layui.layer;

//创建一个头像上传组件
croppers.render({
elem: '#editimg'
,saveW:150 //保存宽度
,saveH:150
,mark:1/1 //选取比例
,area:'900px' //弹窗宽度
,url: "upload/uploadImg" //图片上传接口返回和(layui 的upload 模块)返回的JOSN一样
,done: function(url){ //上传完毕回调
$("#inputimgurl").val(url);
$("#srcimgurl").attr('src',url);
}
});

});







链接:https://pan.baidu.com/s/1av7wLPidugpJQpGgbdykrA 密码:2o0x
回帖
  • 6666,放到第三方平台去吧
    0 回复
  • 在用了,不错,但是发现个问题,放大缩小的图标没显示,而且不能用,只能用鼠标中键操作。
    0 回复
  • @灰色的灵魂 根本就没做放大缩小功能[嘻嘻] 你可以自己加上去
    0 回复
  • 我能说,我看的一脸懵逼么,弱弱的问一下,如何整合到layuiadmin上?
    0 回复






  • 是缺少什么东西吗??
    0 回复
  • 可以了。。。。
    0 回复
  • 还有个问题,假如,我一个页面有两个上传图片,点击第一个后,关闭,再点击第二个时,第一个也会出现,并且无法关闭。
    0 回复
  • 你好,这个什么回事,楼主。
    0 回复
  • [爱你] 导入图片只显示了默认剪切框中的图片,其他的不显示了,还有这样样式好像没有
    0 回复
  • @adminxf 在么
    0 回复
  • 有时间吗。。。[可怜]
    0 回复
  • 感谢分享。
    0 回复