当前位置： 移动技术网 > IT编程>网页制作>CSS > cropper.js裁剪图片并上传

cropper.js裁剪图片并上传

2018年11月01日  | 移动技术网IT编程  | 我要评论

赤炼的圣者,进击的巨人第二季资源,扬州工程建设信息网

cropper.js 裁剪图片并上传

引入+使用

html结构

这里注意，直接设置img的宽高是没有效果的，但是可以在父盒子上(即.box)设置;

官网上的是以下面的一段代码进行引入的

var cropper = new cropper(image, {

ectratio: 16 / 9,

viewmode:1,

crop: function (e) {

console.log(e.detail.x);

console.log(e.detail.y);

console.log(e.detail.width);

console.log(e.detail.height);

console.log(e.detail.rotate);

console.log(e.detail.scalex);

console.log(e.detail.scaley);

}

});

这里有个问题如果使用本地的cropper.js和cropper.css;就会报错(绝对的版本号的问题v1.x版本)，而使用cdn方法报错就可以解除;

cdn的链接;如果使用本地的文件(v3.x版本)则写法变为

$('#image').cropper({

aspectratio: 16 / 9,

viewmode:1,

crop: function (e) {

console.log(e);

}

});

一个简单的demo就出现了;效果图

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网