插件描述：基于cropper.js的图片裁剪插件，本地上传预览，适用于移动端
更新时间：2018/2/25 下午1:07:06
更新说明：裁剪框居中问题，由于低版本号的浏览器有些css属性不支持，用js来裁剪框水平垂直居中
1、引入相关的css和js文件。
2、相关js代码都在页面上，根据自己要求修改。
3、cropper.js的参数请参考相关文档。
PREVIOUS:
NEXT:
相关插件-图像,上传
讨论这个项目（73）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
易霖 0
2021/6/30 0:07:02
-
手机端上传照片变形，电脑端上传照片正常，这个情况怎么修改？😥
??倪0
2021/12/1 13:35:44
-
你的问题修改好了吗，我也遇到了这样的问题
It＇s you. 0
2019/11/28 13:50:51
-
裁剪区域的大小可以设置为固定值吗？
StruggleThunder1
2019/11/29 9:30:21
cropper.js这个插件好像只能设置宽高比
//cropper图片裁剪
$('#tailoringImg').cropper({
aspectRatio: 1 / 1, //默认比例
preview: '.previewImg', //预览视图
guides: false, //裁剪框的虚线(九宫格)
autoCropArea: 0.5, //0-1之间的数值，定义自动剪裁区域的大小，默认0.8
movable: false, //是否允许移动图片
dragCrop: true, //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
movable: true, //是否允许移动剪裁框
resizable: true, //是否允许改变裁剪框的大小
zoomable: false, //是否允许缩放图片大小
mouseWheelZoom: false, //是否允许通过鼠标滚轮来缩放图片
touchDragZoom: true, //是否允许通过触摸移动来缩放图片
rotatable: true, //是否允许旋转图片
crop: function(e) {
// 输出结果数据裁剪图像。
}
});
时代-风1
2020/7/25 9:55:10
-
1就是固定比例,aspectRatio: 'NAN',这个是任意
雨の中で?? 0
2019/7/25 17:16:04
-
前面问错了，问题是：我是通过form.submit提交表单的，怎么将裁剪后的图片路径赋给<input type=file>，不然提交表单会出错
帅不来呆呆0
2019/10/11 16:45:37
-
我也遇到这个问题了，不知道您是怎么解决的？
英雄本色1
2020/4/7 13:18:19
-
不需要将裁剪后的路径赋给input file，你提交的是img src里的 base64编码，由后端解析base64编码转换成图片储存到服务器里，后端在返回给你一个img url地址
雨の中で?? 0
2019/7/25 16:34:01
-
你好，我想问下，如果我想得到 C:\fakepath\i31_登录.jpg 这样的路径，应该怎么做呢，对php不怎么熟，原始程序上传图片后是这个值然后可以正常提交，但我改成你这个之后报错了
回复
勿忘初心 0
2019/6/20 16:44:12
-
可以将裁剪出来后的图片重新画入一个canvas里面，设置这个canvas的宽高（宽高就是你要的图片尺寸大小）。再将这个canvas转成图片
残城.碎梦0
2019/8/9 16:44:00
-
大佬，能不能给个demo
狼行天下 0
2019/4/28 10:16:55
-
请问怎么设置裁剪后图片的大小？
StruggleThunder1
2019/4/30 9:25:34
-
可以将裁剪出来后的图片重新画入一个canvas里面，设置这个canvas的宽高（宽高就是你要的图片尺寸大小）。再将这个canvas转成图片
狼行天下0
2019/5/24 9:17:19
-
好的。那这个插件能实现放大和缩小功能吗？
StruggleThunder0
2019/5/24 17:13:51
-
能。 https://fengyuanchen.github.io/cropperjs/
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
