官方文档：https://github.com/xyxiao001/vue-cropper](https://github.com/xyxiao001/vue-cropper)
访问上面的地址，引入dist里的index.js
style样式
<style>
* {
margin: 0;
padding: 0;
}
.cut {
width: 100%;
height: 360px;
margin: 30px auto;
}
.test-button {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
}
.show-info h2 {
line-height: 50px;
}
.model img {
display: block;
margin: auto;
max-width: 80%;
user-select: none;
background-position: 0px 0px, 10px 10px;
background-size: 20px 20px;
background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%), linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
}
@keyframes slide {
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
.test-button {
position: absolute;
left: 0;
bottom: 0;
height: 70px;
width: 100%;
}
.btn {
width: 50%;
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
text-align: center;
box-sizing: border-box;
outline: none;
font-size: 16px;
border-radius: 4px;
color: #fff;
transition: all .2s ease;
text-decoration: none;
user-select: none;
}
</style>
body代码
<div id="app" style="position: absolute;top: 0;bottom: 0;left: 0;right:0; background-color: #0C0C0C">
<div class="cut">
<vue-cropper ref="cropper" :img="option.img" :output-size="option.size" :output-type="option.outputType"
:info="false" :full="option.full"
:can-move="option.canMove" :can-move-box="option.canMoveBox" :fixed-box="option.fixedBox"
:original="option.original"
:auto-crop="option.autoCrop" :auto-crop-width="option.autoCropWidth"
:auto-crop-height="option.autoCropHeight" :center-box="option.centerBox"
@real-time="realTime" :high="option.high"
style="background-image: none;background-color: #0C0C0C"></vue-cropper>
</div>
<div class="test-button">
<label class="btn" for="uploads">选择照片</label>
<input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);"
accept="image/png, image/jpeg, image/jpg"
@change="uploadImg($event, 1)">
<button @click="finish('base64')" class="btn">使用</button>
</div>
</div>
引入你的路径下的JS
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/index.js"></script>
JS代码
<script type="text/javascript">
var Vue = window.Vue;
var cropper = window.vue - cropper;
//注册组件
Vue.use(cropper);
var vuedata = {
model: false,
modelSrc: '',
option: {
img: '',
size: 1,
full: false,
outputType: 'png',
canMove: true,
fixedBox: true,
original: false,
canMoveBox: true,
autoCrop: true,
// 只有自动截图开启 宽度高度才生效
autoCropWidth: 200,
autoCropHeight: 200,
centerBox: false,
high: true
},
show: true
}
apiready = function () {
if ($api.getStorage('size')) {
var size = $api.getStorage('size');
vuedata.option.autoCropWidth = size.width;
vuedata.option.autoCropHeight = size.height;
$api.rmStorage('size');
}
vuedata.type = $api.getStorage('picType');
$api.rmStorage('picType');
vuedata.option.img = $api.getStorage('imgPath');
};
var vm = new Vue({
el: '#app',
data: vuedata,
created: {},
methods: {
changeScale: function (num) {
num = num || 1
this.$refs.cropper.changeScale(num)
},
finish: function (type) {
vant.Toast.loading({
duration: 0, // 持续展示 toast
forbidClick: true, // 禁用背景点击
loadingType: 'spinner',
message: '上传中...'
});
if (type === 'blob') {
this.$refs.cropper.getCropBlob((data) => {
var img = window.URL.createObjectURL(data)
this.model = true
this.modelSrc = img
})
} else {
this.$refs.cropper.getCropData((data) => {
// this.model = true
this.modelSrc = data
// console.log(this.modelSrc);
if (this.modelSrc) {
api.ajax({
url: requestUrl().url + '/api/uploads/uploadBase',
method: 'post',
data: {
values: {
content: this.modelSrc
}
}
}, function (ret, err) {
// console.log(ret);
if (ret.code == 1) {
vant.Toast.clear();
if (vuedata.type == 1) {
var timestamp = requestUrl().timestamp;
var sign = requestUrl().sign;
var id = $api.getStorage('user_info').userid;
var token = $api.getStorage('user_info').token;
api.ajax({
url: requestUrl().url + '/apis/Users/set_user_info?sign=' + sign,
method: 'post',
data: {
values: {
headimg: ret.data,
user_id: id,
token: token,
timestamp: timestamp
},
}
}, function (ret, err) {
console.log(JSON.stringify(ret))
if (ret) {
if (ret.code == 1) {
//用户中心更新数据
api.sendEvent({
name: 'userInfo',
extra: {
reload: true
}
});
api.closeWin();
}
} else {
toast('上传失败');
}
});
} else if (vuedata.type == 2) {
$api.setStorage('shop_img', ret.data);
var jsfun = "vuedata.shop_img = $api.getStorage('shop_img');";
api.execScript({
name: 'settle_in',
script: jsfun
});
api.closeWin();
} else if (vuedata.type == 3) {
$api.setStorage('business_license', ret.data);
var jsfun = "vuedata.business_license = $api.getStorage('business_license');";
api.execScript({
name: 'settle_in',
script: jsfun
});
api.closeWin();
} else if (vuedata.type == 4) {
$api.setStorage('idcard_user_img', ret.data);
var jsfun = "vuedata.idcard_user_img = $api.getStorage('idcard_user_img');";
api.execScript({
name: 'settle_in',
script: jsfun
});
api.closeWin();
} else if (vuedata.type == 5) {
$api.setStorage('idcard_img_0', ret.data);
var jsfun = "vuedata.idcard_img_0 = $api.getStorage('idcard_img_0');";
api.execScript({
name: 'settle_in',
script: jsfun
});
api.closeWin();
} else if (vuedata.type == 6) {
$api.setStorage('idcard_img_1', ret.data);
var jsfun = "vuedata.idcard_img_1 = $api.getStorage('idcard_img_1');";
api.execScript({
name: 'settle_in',
script: jsfun
});
api.closeWin();
}
}
})
}
})
}
},
// 实时预览函数
realTime: function (data) {
console.log(data)
this.previews = data
},
finish2: function (type) {
this.$refs.cropper2.getCropData((data) => {
this.model = true
this.modelSrc = data
})
},
finish3: function (type) {
this.$refs.cropper3.getCropData((data) => {
this.model = true
this.modelSrc = data
})
},
down: function (type) {
// event.preventDefault()
var aLink = document.createElement('a')
aLink.download = 'demo'
// 输出
if (type === 'blob') {
this.$refs.cropper.getCropBlob((data) => {
this.downImg = window.URL.createObjectURL(data)
aLink.href = window.URL.createObjectURL(data)
aLink.click()
})
} else {
this.$refs.cropper.getCropData((data) => {
this.downImg = data
aLink.href = data
aLink.click()
})
}
},
uploadImg: function (e, num) {
//上传图片
// this.option.img
var file = e.target.files[0]
if (!/\.(jpg|jpeg|png|bmp|JPG|PNG)$/.test(e.target.value)) {
alert('图片类型必须是.jpeg,jpg,png,bmp中的一种')
return false
}
var reader = new FileReader()
reader.onload = (e) => {
let data
if (typeof e.target.result === 'object') {
// 把Array Buffer转化为blob 如果是base64不需要
data = window.URL.createObjectURL(new Blob([e.target.result]))
} else {
data = e.target.result
}
if (num === 1) {
this.option.img = data
} else if (num === 2) {
this.example2.img = data
}
}
// 转化为base64
// reader.readAsDataURL(file)
// 转化为blob
reader.readAsArrayBuffer(file)
},
imgLoad(msg) {
// console.log(msg)
}
},
mounted() {
// console.log(window['vue-cropper'])
}
})
</script>
</html>
网友评论