vue-imageClipper (mobile)
vue-imageClipper
import Vue from 'vue';
import imageClipper from 'path/imageClipper/index'
Vue.use(imageClipper);
<image-clipper ref="clipper" v-show="visible" :img="imgUrl" :clipper-img-width="250" :clipper-img-height="250" @sure="sure"></image-clipper>
export default {
data() {
return {
visible: true,
imgUrl: 'xxx'
}
},
methods: {
ok(data) {
this.$refs.clipper.getBase64(data);
}
}
}
Option |
Default |
Type |
Description |
[img ] |
"" |
String |
图片url或dataURL |
[clipperImgWidth ] |
500 |
Number |
裁剪图片的宽度 |
[clipperImgHeight ] |
200 |
Number |
裁剪图片的高度 |
Name |
Args |
Description |
beforeLoad |
no |
图片加载前触发 |
loadSuccess |
no |
图片加载成功触发 |
loadError |
no |
图片加载失败触发 |
loadComplete |
no |
图片加载完成触发 |
ok |
dataUrl |
点击确认按钮,返回裁剪图片的dataUrl |
cancel |
no |
点击取消按钮 |
Name |
Args |
Return |
getBase64 |
dataUrl |
img base64 |