插件描述：这是一款上传头像图片插件，可裁剪，也可调整裁剪图片宽高
//上传封面
//document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
var clipArea = new bjj.PhotoClip("#clipArea", {
size: [428, 321], // 截取框的宽和高组成的数组。默认值为[260,260]
outputSize: [428, 321], // 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小
//outputType: "jpg", // 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"
file: "#file", // 上传图片的<input type="file">控件的选择器或者DOM对象
view: "#view", // 显示截取后图像的容器的选择器或者DOM对象
ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
loadStart: function() {
// 开始加载的回调函数。this指向 fileReader 对象，并将正在加载的 file 对象作为参数传入
$('.cover-wrap').fadeIn();
console.log("照片读取中");
},
loadComplete: function() {
// 加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入
console.log("照片读取完成");
},
//loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象，并将错误事件的 event 对象作为参数传入
clipFinish: function(dataURL) {
// 裁剪完成的回调函数。this指向图片对象，会将裁剪出的图像数据DataURL作为参数传入
$('.cover-wrap').fadeOut();
$('#view').css('background-size', '100% 100%');
console.log(dataURL);
}
});
//clipArea.destroy();
//这是我项目中用到的，我将之提了出来
PREVIOUS:
NEXT:
相关插件-图像,上传
讨论这个项目（211）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
我和小飞飞呀，从小是一对 0
2020/4/29 16:53:01
-
我把这个插件在微信浏览器里运行，苹果的可以，安卓的选择图片不出现裁剪弹窗但是拍照的图片有弹窗并且可以裁剪。这个问题有解决办法吗
回复
浅笑依然 0
2019/9/12 8:30:42
-
这个是还很好用的，点击上传后，直接进入切图选择，这样对小白客户很方便。但是，点击确认后可能出现为，建议报截图下面的提交按钮改成div之类的。button放到表单中，可能出现冲突。可以好用ajax将切图后的base64位的数据提交后台，然后得到后台反馈，显示的前端界面，还是很好用的一个插件的。就是不知道为什么，截图后，600多像素，150kb以上呢
Forever0
2020/1/16 15:11:26
-
怎么将base64位的数据和别的数据一起传给后台
Forever0
2020/1/16 17:04:55
-
知道了
软工17-2王天忆 0
2019/4/21 19:56:50
-
在哪调裁剪的宽高啊
软工17-2王天忆0
2019/4/21 19:58:28
-
刚才瞎了。
冷光0
2019/6/10 10:25:58
-
下载还要币。。。。
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
