1、引入组件
npm install vue-cropper-h5 or yarn add vue-cropper-h5 or cnpm install vue-cropper-h5
2、在需要的引入裁剪功能的页面引入组件
<1>html
<!-- 裁剪组件 -->
<div class="cropperh5">
<cropperh5
ref="cropper"
hide-input
:option="option"
@getFile="getFile"
></cropperh5>
</div>
<2>js
引入下边是静态引入的方式
import cropperh5 from "../../../components/uni-cropper/cropper-h5";
<3>相关的属性设置
export default {
components: {
cropperh5,
},
data() {
return {
option: {//裁剪各个属性的设置 具体参数说明参照cropper.js组件介绍
info: true,
fixed: true,
fixedNumber: [9, 16],//照片的比例
fixedBox: false,
canMoveBox: true,
confirmButtonBackgroundColor: "#90ba21",
},
};
},
}
<4>相机设置(需求要求只能是相机不能从相机选择照片)
uni.chooseImage({
count: 1,
sizeType: ["original"],//原图
sourceType: ["camera"],//设置只能从相机选择照片
success: function (result) {
var blob = result.tempFilePaths[0];
console.log(blob);
that.beginUploadImageIfNeed(blob);
},
fail: function (error) {
uni.showToast({
title: "获取图片失败",
duration: 1500,
});
},
});
<5>完整代码
<template>
<view class="content uni-padding-wrap uni-common-mt">
<!-- 裁剪组件 -->
<div class="cropperh5">
<cropperh5
ref="cropper"
hide-input
:option="option"
@getFile="getFile"
></cropperh5>
</div>
<div class="cropperFront" @click="hanldeCamera('0006')">
<button class="bt_update btn">上传身份证人像面</button>
</div>
<div class="cropperBack" @click="hanldeCamera('0006')">
<image :src="imgFront" class="img-pre" />
</div>
<div class="cropperFront" @click="hanldeCamera('0007')">
<button class="bt_update btn">上传身份证国徽面</button>
</div>
<div class="cropperBack" @click="hanldeCamera('0007')">
<image :src="imgBack" class="img-pre" />
</div>
<view style="text-align: center"
>请按照样例图拍照,拍照前先设置相机像素>48万、相机长宽比为16:9。</view
>
<button type="primary" @click="doNext">下一步</button>
<view style="height: 60upx"></view>
</view>
</template>
<script>
import cropperh5 from "../../../components/uni-cropper/cropper-h5";
export default {
components: {
cropperh5,
},
data() {
return {
cardFrontFlag: false, //是否上传了正面
cardBackFlag: false, //是否上传了反面
openId: "",
option: {
info: true,
fixed: true,
fixedNumber: [9, 16],
fixedBox: false,
canMoveBox: true,
confirmButtonBackgroundColor: "#90ba21",
},
curOptionType: "",
imgFront: "../../../static/idcard_front.jpg",
imgBack: "../../../static/idcard_back.jpg",
};
},
onLoad: function (options) {
try {
//从缓存中获取openId
// this.openId = "asd2020062810421263542802";
this.openId = uni.getStorageSync("openId");
} catch (e) {
//TODO handle the exception
}
if (options.cardCode != undefined) {
this.cutCallBack();
}
},
//返回逻辑
onBackPress(options) {
var backFrom = options.from;
//backbutton是指Android 实体返回键;navigateBack是uni-app的uni.navigateBack()
if (backFrom == "backButton" || backFrom == "navigateBack") {
//自定义返回页面
uni.redirectTo({
url: "/pages/uyou/SelectSetMeal/SelectSetMeal",
});
//return true以上代码才会生效
return true;
}
},
methods: {
hanldeCamera(type) {
this.curOptionType = type;
let that = this;
uni.chooseImage({
count: 1,
sizeType: ["original"],
sourceType: ["camera"],
success: function (result) {
var blob = result.tempFilePaths[0];
console.log(blob);
that.beginUploadImageIfNeed(blob);
},
fail: function (error) {
uni.showToast({
title: "获取图片失败",
duration: 1500,
});
},
});
},
/**
* 将以blob对象转为本地路径
*/
getObjectURL(file) {
let url = null;
if (window.createObjcectURL != undefined) {
url = window.createOjcectURL(file);
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file);
}
return url;
},
getFile(data) {
data = this.getObjectURL(data);
console.log("curOptionType: ", this.curOptionType);
console.log("-->blob: ", data);
if (this.curOptionType == "0006") {
this.imgFront = data; //剪切后预览正面
} else {
this.imgBack = data; //剪切后预览反面
}
this.uploadAndOCRCheck(this.curOptionType, data);
},
uploadAndOCRCheck(flag, data) {
uni.showLoading({
title: "正在上传图片...",
mask: true,
});
var self = this;
uni.uploadFile({
url: self.baseUrl + "/api/NfcOpen/file/uploadIdCardAndCheckOCR",
filePath: data, //blob格式文件放这里
// file: data,
fileType: "image",
name: "file",
formData: {
openId: self.openId,
code: flag, //身份证正反面标识,后台用于区分正反面:0006标识正面,0007标识反面
},
success: (res) => {
uni.hideLoading();
if (res.statusCode === 200) {
var data = JSON.parse(res.data);
var code = data.code;
var msg = data.message;
if (code == 0) {
//操作成功,更新标识
if (flag == "0006") {
self.cardFrontSrc = data;
self.cardFrontFlag = true;
} else if (flag == "0007") {
self.cardBackSrc = data;
self.cardBackFlag = true;
}
uni.showToast({
title: "上传成功",
duration: 1500,
});
} else {
//操作失败,更新标识
if (flag == "0006") {
self.cardFrontSrc = "../../../static/idcard_front.jpg";
self.cardFrontFlag = false;
} else if (flag == "0007") {
self.cardBackSrc = "../../../static/idcard_back.jpg";
self.cardBackFlag = false;
}
//弹出提示信息
uni.showModal({
content: msg,
showCancel: false,
confirmText: "确定",
});
}
} else {
//请求未成功,弹出窗体,禁止跳转
uni.showModal({
content: "请求后台失败",
showCancel: false,
confirmText: "确定",
});
return false;
}
},
fail: function (error) {
uni.hideLoading();
uni.showToast({
title: "上传出错",
icon: "none",
duration: 2000,
});
return false;
},
});
},
//下一步
doNext() {
console.log(this.cardFrontFlag);
// var self = this
let msg = "";
if (!this.cardFrontFlag) {
msg = "身份证人像面未上传\n或身份证校验不通过";
} else if (!this.cardBackFlag) {
msg = "身份证国徽面未上传\n或身份证校验不通过";
} else {
uni.navigateTo({
url: "/pages/uyou/NFCRecognition/NFCRecognition",
});
return;
}
uni.showModal({
title: "警告",
content: msg,
showCancel: false,
});
},
// 异步封装
async beginUploadImageIfNeed(bloburl) {
var file = await this.httpRequest(bloburl); //bloburl 格式 blob:null/73e6954e-58ee-4165-870b-03614f9e3b5f
this.$refs.cropper.loadFile(file);
},
//blob文件转化
httpRequest(src) {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.open("GET", src, true);
xhr.responseType = "blob";
xhr.onload = function (e) {
if (this.status == 200) {
let myBlob = this.response;
let files = new window.File([myBlob], myBlob.type, {
type: myBlob.type,
}); // myBlob.type 自定义文件名
resolve(files);
} else {
reject(false);
}
};
xhr.send();
});
},
},
};
</script>
<style>
uni-button:after {
border: none;
}
uni-button {
background: none;
}
.cropperh5 {
width: 0;
height: 0;
}
.cropperFront {
width: 100%;
height: 100upx;
margin-top: 10upx;
line-height: 100upx;
/* 切记position: relative一定要有 */
position: relative;
/* left: 10%; */
/* border-radius: 50%; */
overflow: hidden;
text-align: center;
}
.cropperBack {
width: 100%;
height: 400upx;
line-height: 400upx;
/* 切记position: relative一定要有 */
position: relative;
/* left: 10%; */
margin-top: 20upx;
/* border-radius: 50%; */
overflow: hidden;
text-align: center;
}
.bt_update {
position: absolute;
width: 100%;
height: auto;
margin-top: 10upx;
left: 0;
top: 0;
}
.img-pre {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
</style>