cropper 图片截取(剪裁)上传

讨论 未结
39 949
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
回帖
  • liangjinzhao
    2018-11-12
    为啥我点击修改图片的时候,弹窗是一闪又不见了
    1 回复
  • @吹呀吹呀 可能的原因就是你的接口返回结果和这个插件要求的不一致,可以做出相应修改,比如修改插件“croppers.js”中大约100行位置的success回调方法中的内容即可
    要么修改插件的js文件,要么修改你的接口返回格式,两者任选其一
    1 回复
  • 6666,放到第三方平台去吧
    0 回复
  • 在用了,不错,但是发现个问题,放大缩小的图标没显示,而且不能用,只能用鼠标中键操作。
    0 回复
  • @灰色的灵魂 根本就没做放大缩小功能[嘻嘻] 你可以自己加上去
    0 回复
  • 我能说,我看的一脸懵逼么,弱弱的问一下,如何整合到layuiadmin上?
    0 回复






  • 是缺少什么东西吗??
    0 回复
  • 可以了。。。。
    0 回复
  • 还有个问题,假如,我一个页面有两个上传图片,点击第一个后,关闭,再点击第二个时,第一个也会出现,并且无法关闭。
    0 回复
  • 你好,这个什么回事,楼主。
    0 回复
  • [爱你] 导入图片只显示了默认剪切框中的图片,其他的不显示了,还有这样样式好像没有
    0 回复
  • @adminxf 在么
    0 回复
  • 有时间吗。。。[可怜]
    0 回复
  • 感谢分享。
    0 回复
  • ket
    2018-11-8
    elem使用类名后,初始化的元素可用,动态添加的就不可用了
    0 回复
  • liangjinzhao
    2018-11-10
    问个问题啊 在项目内使用第三方的插件cropper,是不是两个都要配置
    0 回复
  • liangjinzhao
    2018-11-10
    @仔仔235 你是怎么整合的?我都整合不了
    0 回复
  • yjyjyjyj
    2018-12-6
    @仔仔235 你解决了吗?我也是这样
    0 回复
  • zxz_wish
    2018-12-7
    @liangjinzhao 你的一闪一闪的解决了吗?我的也是这个样子
    0 回复
  • liangjinzhao
    2018-12-15

    这个裁剪框怎么一直都是长宽相等的啊
    0 回复
  • liangjinzhao
    2018-12-15
    @adminxf
    这个裁剪框怎么一直都是长宽相等的啊
    0 回复
  • 一码春秋
    2018-12-21
    @liangjinzhao ???闪的解决了吗
    0 回复
  • 一码春秋
    2018-12-21
    @adminxf 2.4.5 点击 会闪,出现不了。然后就默认隐藏了。。。
    0 回复
  • 一码春秋
    2018-12-21
    @高先生_c 也是哔了狗。。。找到原因了,你那个在扩展组件中的 列子最好更改下。不然会让很多人懵逼。button按钮在form表单中,会进行二次刷新。本来点击第一遍出来了,但是走完之后,执行了刷新事件。所以都以为是一闪就没了。不知道的还以为是BUG呢。
    0 回复
  • 一码春秋
    2018-12-21
    @yjyjyjyj button按钮在form表单中,会进行二次刷新。本来点击第一遍出来了,但是走完之后,执行了刷新事件。所以都以为是一闪就没了。不知道的还以为是BUG呢。
    0 回复
  • 请问一下,为什么回调函数不执行啊[泪]
    0 回复
  • @adminxf 在吗,请问一下 为什么done 回调方法不执行啊[泪]
    0 回复
  • 为什么 formData 打印结果是file: (binary)?
    提价的时候不可以自己加 参数吗??
    0 回复
  • @仔仔235 两次实例化,创建了两个。知道如何解决吗
    0 回复
  • @flyer625 var formData=new FormData();
    formData.append('file',blob,'123.png');
    formData.append('count',3); // 随便加参数
    0 回复