cropper.js裁剪图片并上传

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就出现了;效果图