uniapp实现拍照模板
本文主要介绍使用uniapp实现拍照自定义拍照模板功能
看到这个需求，首先想到可以使用uniapp上的camera组件，然后在用cover-image添加一个图片就可以达到要求。
但是camera组件有兼容性的问题，不支持app端。
于是参考别人的写法，看到有一个live-pusher直播流组件，用nvue写就可以兼容app。
技术拆分：
1.小程序端使用camera组件。页面内嵌的区域相机组件。注意这不是点击后全屏打开的相机。
2.App端使用直播推流 live-pusher 组件，官方上说：如app平台的vue页面需要支持直播推流，需编写条件编译代码，
使用 plus.video.LivePusher，业务指南、
规范文档。
还是推荐直接使用nvue里的live-pusher组件。所以我们使用nvue格式来代替vue格式的页面。
不管是camera组件还是live-pusher组件。他们都是原生组件，所以必须使用cover-image、cover-view来制作覆盖层。
2个功能。1.实现相机+取景框的拍照组合。2.裁剪取景框内的元素。
拍照：1.APP端使用
2.小程序端只用
裁剪：1.APP端无法使用canvas的API，因为用的是nvue文件，目前不支持官方canvas的API，可以使用官方提供的gcanvas的API。（gcanvas的drawImage不允许临时路径）
2.小程序端通过canvas提供的API可实现。
关于gcanvas 参考官方示例 https://github.com/dcloudio/NvueCanvasDemo
<template>
<view
class="live-camera"
:style="{ width: `${windowWidth}px`, height: `${windowHeight}px` }"
>
<view
class="preview"
:style="{ width: `${windowWidth}px`, height: `${windowHeight - 90}px` }"
>
<!-- #ifdef APP-PLUS -->
<live-pusher
v-if="showLive"
id="livePusher"
ref="livePusher"
class="livePusher"
mode="FHD"
beauty="0"
whiteness="0"
:aspect="aspect"
min-bitrate="1000"
audio-quality="16KHz"
device-position="back"
:auto-focus="true"
:muted="true"
:enable-camera="true"
:enable-mic="false"
:zoom="false"
@statechange="statechange"
@error="error"
:style="{ width: `${cameraWidth}px`, height: `${windowHeight - 90}px` }"
></live-pusher>
<!-- #endif -->
<!-- #ifdef MP -->
<camera
:style="{ width: `${cameraWidth}px`, height: `${windowHeight - 90}px` }"
:device-position="devicePosition"
></camera>
<!-- #endif -->
<!--辅助线-->
<cover-view
class="outline-box"
:style="{ width: `${windowWidth}px`, height: `${windowHeight - 90}px` }"
>
<cover-image
v-if="type === '0'"
class="outline-img"
src="../static/images/regist/k-sfz.png"
></cover-image>
<cover-image
v-else-if="type === '1'"
class="outline-img"
src="../static/images/regist/k-sfzb.png"
></cover-image>
<cover-image
v-else-if="type === '2'"
class="outline-img1"
src="../static/images/regist/jsz-qjk.png"
></cover-image>
<cover-image
v-else-if="type === '3'"
class="outline-img1"
src="../static/images/regist/xsz-qjk.png"
></cover-image>
<cover-image
v-else-if="type === '4'"
class="outline-img"
src="../static/images/regist/k-cyzgz.png"
></cover-image>
<cover-image
v-else-if="type === '5'"
class="outline-img"
src="../static/images/regist/k-dlysz.png"
></cover-image>
<ksfz />
</cover-view>
</view>
<view class="menu">
<!--底部菜单区域背景-->
<cover-image
class="menu-mask"
src="../static/images/regist/bar.png"
></cover-image>
<!--返回键-->
<cover-image
class="menu-back"
@tap="back"
src="../static/images/regist/back2.png"
></cover-image>
<!--快门键-->
<cover-image
class="menu-snapshot"
@tap="snapshot"
src="../static/images/regist/btn.png"
></cover-image>
<!--反转键-->
<cover-image
class="menu-flip"
@tap="flip"
src="../static/images/regist/flip.png"
></cover-image>
</view>
<canvas-crop ref="crop"></canvas-crop>
</view>
</template>
<script>
import {
judgeIosPermission,
requestAndroidPermission,
gotoAppPermissionSetting,
} from '@/common/scripts/permission.js';
import { uploadFileOSS } from '@/api/oss.js';
import { errorMsg } from '@/common/scripts/message.js';
import config from '@/config/index.js';
export default {
data() {
return {
devicePosition: 'back', //前置或后置摄像头,值为front, back
poenCarmeInterval: null, //打开相机的轮询
dotype: 'idcardface', //操作类型
message: '', //提示
aspect: '2:3', //比例
cameraWidth: '', //相机画面宽度
cameraHeight: '', //相机画面宽度
windowWidth: '', //屏幕可用宽度
windowHeight: '', //屏幕可用高度
camerastate: false, //相机准备好了
livePusher: null, //流视频对象
snapshotsrc: null, //快照
type: null,
showLive: false, //安卓机需要先判断权限有没有授权
imageInfo: {}, //取景框内的图片大小
context: {}, //canvas实例对象
rpx2px: '',
finder: {
//取景框尺寸，驾驶证、行驶证为333*999，其他为640*980
width: 640,
height: 980,
},
};
},
onLoad(e) {
this.type = e.type;
if (['2', '3'].indexOf(this.type) > -1)
this.finder = { width: 333, height: 999 };
console.log(this.finder);
},
async onReady() {
this.initCamera();
// #ifdef APP-NVUE
if (plus.os.name === 'Android') {
await this.checkAndriodCamera();
} else {
this.showLive = true;
}
// #endif
// #ifdef MP
this.showLive = true;
if (!(await this.checkCamera())) {
return;
}
// #endif
// #ifdef APP-PLUS
this.showLive
? this.$nextTick(() => {
this.livePusher = uni.createLivePusherContext('livePusher', this);
})
: '';
if (plus.os.name === 'iOS') {
setTimeout(() => {
//开启预览并设置摄像头
this.startPreview();
}, 100);
}
// #endif
},
methods: {
//初始化相机
initCamera() {
//处理安卓手机异步授权问题
uni.getSystemInfo({
success: (res) => {
console.log('手机信息', res);
this.windowWidth = res.windowWidth;
this.windowHeight = res.windowHeight;
this.cameraWidth = res.windowWidth;
this.cameraHeight = res.windowWidth * 1.5;
this.rpx2px = (1 / 750) * res.windowWidth;
let imgW = parseInt(this.finder.width * this.rpx2px),
imgH = parseInt(this.finder.height * this.rpx2px); // 640和980是css里定义取景框的rpx宽度
this.imageInfo = {
width: imgW,
height: imgH,
};
},
});
},
//检查安卓相机权限
async checkAndriodCamera() {
let androidPermisson = await requestAndroidPermission(
'android.permission.CAMERA'
);
if (androidPermisson === 1) {
this.showLive = true;
this.$nextTick(() => {
this.livePusher = uni.createLivePusherContext('livePusher', this);
});
setTimeout(() => {
//开启预览并设置摄像头
this.startPreview();
this.poenCarme();
}, 100);
} else {
uni.showModal({
content: '请打开摄像头授权功能！',
showCancel: false,
success: (res) => {
if (res.confirm) gotoAppPermissionSetting();
},
});
}
console.log('checkAndriodCamera', androidPermisson);
},
//检查照相机权限
checkCamera() {
return new Promise(async (resolve) => {
// #ifdef APP-PLUS
if (plus.os.name === 'iOS' && !judgeIosPermission('camera')) {
uni.showModal({
content: '请打开摄像头授权功能！',
showCancel: false,
success: (res) => {
if (res.confirm) gotoAppPermissionSetting();
},
});
resolve(false);
} else if (plus.os.name === 'Android') {
let androidPermisson = await requestAndroidPermission(
'android.permission.CAMERA'
);
console.log(androidPermisson);
if (androidPermisson < 1) {
uni.showModal({
content: '请打开摄像头授权功能！',
showCancel: false,
});
resolve(false);
} else {
resolve(true);
}
} else {
resolve(true);
}
// #endif
// #ifdef MP
uni.getSetting({
success: (sRes) => {
console.log(sRes);
if (sRes.authSetting['scope.camera'] === false) {
uni.showModal({
content: '请打开摄像头授权功能！',
showCancel: false,
});
resolve(false);
} else {
resolve(true);
}
},
fail: (err) => {
console.log(err);
},
});
// #endif
});
},
//轮询打开
async poenCarme() {
//#ifdef APP-PLUS
if (plus.os.name == 'Android') {
this.poenCarmeInterval = setInterval(() => {
if (!this.camerastate) this.startPreview();
}, 1000);
}
//#endif
},
//开始预览
startPreview() {
this.livePusher.startPreview({
success: async (a) => {
//直播推流默认是前置摄像头，预览成功后给转成后置摄像头
if (plus.os.name == 'iOS') {
this.livePusher.switchCamera();
this.camerastate = true;
}
},
});
},
error(e) {
clearInterval(this.poenCarmeInterval);
console.log('error:' + JSON.stringify(e));
if (e.detail.errCode === 10001) {
uni.showModal({
content: '请打开摄像头授权功能！',
showCancel: false,
success: (res) => {
if (res.confirm) gotoAppPermissionSetting();
},
});
}
},
//停止预览
stopPreview() {
this.livePusher.stopPreview({
success: (a) => {
this.camerastate = false; //标记相机未启动
},
});
},
//状态
statechange(e) {
//状态改变
console.log(e);
if (e.detail.code == 1003 || e.detail.code == 1007) {
//1007
this.camerastate = true;
} else if (e.detail.code == -1301) {
this.checkCamera();
this.camerastate = false;
}
},
//返回
back() {
uni.navigateBack();
},
/**
* 抓拍，因为APP端用的gcanvas，gcanvas.drawImage不允许临时图片，所以要先传一次图片
* **/
snapshot() {
if (!this.checkCamera()) {
return false;
}
//震动
uni.vibrateShort();
// #ifdef APP-PLUS
this.livePusher.snapshot({
success: async (e) => {
this.uploadImage(`file://${e.message.tempImagePath}`);
},
fail: (err) => {
console.log(err);
},
});
// #endif
// #ifdef MP
const ctx = uni.createCameraContext();
ctx.takePhoto({
quality: 'high',
success: (res) => {
this.uploadImage(res.tempImagePath);
},
});
// #endif
},
/**
* 获取临时路径的图片宽高大小
* **/
getImageInfo(path) {
return new Promise((resolve, reject) => {
uni.getImageInfo({
src: path,
success: (res) => {
resolve(res);
},
fail: (err) => {
reject(err);
resolve(err);
},
});
});
},
async uploadImage(path) {
let info = await this.getImageInfo(path); //获取临时路径的图片宽高大小
let width = Math.round(
((this.rpx2px * this.finder.width) / this.cameraWidth) * info.width
),
height = Math.round(
((this.rpx2px * this.finder.height) / (this.windowHeight - 90)) *
info.height
);
let x = parseInt((info.width - width) / 2),
y = parseInt((info.height - height) / 2);
uploadFileOSS(path)
.then((res) => {
this.snapshotsrc =
res.url +
`?x-oss-process=image/crop,x_${x},y_${y},w_${width},h_${height}/rotate,270`;
console.log(this.snapshotsrc);
this.setImage({ x, y, width, height });
uni.navigateBack({
delta: 2,
});
})
.catch((err) => {
console.log(err);
errorMsg(err);
});
},
//反转
flip() {
// #ifdef APP-PLUS
this.livePusher.switchCamera();
// #endif
// #ifdef MP
this.devicePosition = this.devicePosition === 'back' ? 'front' : 'back';
// #endif
},
//设置
setImage(x, y, width, height) {
let pages = getCurrentPages();
let prevPage = pages[pages.length - 3]; //上二个页面
//直接调用上二个页面的setImage()方法，把数据存到上二个页面中去
prevPage.$vm.setImage({ path: this.snapshotsrc, type: this.type });
},
},
};
</script>
<style lang="scss">
.live-camera {
.preview {
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
.canvas {
visibility: hidden;
position: absolute;
top: 0;
z-index: -1;
}
.gcanvas {
z-index: -1;
position: absolute;
}
.outline-box {
position: absolute;
top: 0;
left: 0;
bottom: 0;
z-index: 99;
align-items: center;
justify-content: center;
display: flex;
.outline-img {
width: 640rpx;
height: 980rpx;
}
.outline-img1 {
width: 333rpx;
height: 999rpx;
}
}
.remind {
position: absolute;
left: -106px;
top: 880rpx;
width: 750rpx;
z-index: 100;
transform: rotate(90deg);
align-items: center;
justify-content: center;
color: #ffffff;
.remind-text {
color: #ffffff;
font-weight: bold;
}
}
}
.menu {
position: absolute;
left: 0;
bottom: 0;
width: 750rpx;
height: 90px;
z-index: 98;
align-items: center;
justify-content: center;
background-color: #000;
box-sizing: inherit;
.menu-mask {
position: absolute;
left: 0;
bottom: 0;
width: 750rpx;
height: 180rpx;
z-index: 98;
}
.menu-back {
position: absolute;
left: 30rpx;
bottom: 50rpx;
width: 80rpx;
height: 80rpx;
z-index: 99;
align-items: center;
justify-content: center;
}
.menu-snapshot {
width: 130rpx;
height: 130rpx;
z-index: 99;
}
.menu-flip {
position: absolute;
right: 30rpx;
bottom: 50rpx;
width: 80rpx;
height: 80rpx;
z-index: 99;
align-items: center;
justify-content: center;
}
}
}
.back {
width: 88rpx;
height: 88rpx;
margin-left: 20rpx;
margin-top: env(safe-area-inset-top);
position: absolute;
top: 0;
left: 0;
}
</style>
/**
* 本模块封装了Android、iOS的应用权限判断、打开应用权限设置界面、以及位置系统服务是否开启
*/
var isIos;
// #ifdef APP-PLUS
isIos = plus.os.name == 'iOS';
// #endif
// 判断推送权限是否开启
function judgeIosPermissionPush() {
var result = false;
var UIApplication = plus.ios.import('UIApplication');
var app = UIApplication.sharedApplication();
var enabledTypes = 0;
if (app.currentUserNotificationSettings) {
var settings = app.currentUserNotificationSettings();
enabledTypes = settings.plusGetAttribute('types');
console.log('enabledTypes1:' + enabledTypes);
if (enabledTypes == 0) {
console.log('推送权限没有开启');
} else {
result = true;
console.log('已经开启推送功能!');
}
plus.ios.deleteObject(settings);
} else {
enabledTypes = app.enabledRemoteNotificationTypes();
if (enabledTypes == 0) {
console.log('推送权限没有开启!');
} else {
result = true;
console.log('已经开启推送功能!');
}
console.log('enabledTypes2:' + enabledTypes);
}
plus.ios.deleteObject(app);
plus.ios.deleteObject(UIApplication);
return result;
}
// 判断定位权限是否开启
function judgeIosPermissionLocation() {
var result = false;
var cllocationManger = plus.ios.import('CLLocationManager');
var status = cllocationManger.authorizationStatus();
result = status != 2;
console.log('定位权限开启：' + result);
// 以下代码判断了手机设备的定位是否关闭，推荐另行使用方法 checkSystemEnableLocation
/* var enable = cllocationManger.locationServicesEnabled();
var status = cllocationManger.authorizationStatus();
console.log("enable:" + enable);
console.log("status:" + status);
if (enable && status != 2) {
result = true;
console.log("手机定位服务已开启且已授予定位权限");
} else {
console.log("手机系统的定位没有打开或未给予定位权限");
} */
plus.ios.deleteObject(cllocationManger);
return result;
}
// 判断麦克风权限是否开启
function judgeIosPermissionRecord() {
var result = false;
var avaudiosession = plus.ios.import('AVAudioSession');
var avaudio = avaudiosession.sharedInstance();
var permissionStatus = avaudio.recordPermission();
console.log('permissionStatus:' + permissionStatus);
if (permissionStatus == 1684369017 || permissionStatus == 1970168948) {
console.log('麦克风权限没有开启');
} else {
result = true;
console.log('麦克风权限已经开启');
}
plus.ios.deleteObject(avaudiosession);
return result;
}
// 判断相机权限是否开启
function judgeIosPermissionCamera() {
var result = false;
var AVCaptureDevice = plus.ios.import('AVCaptureDevice');
var authStatus = AVCaptureDevice.authorizationStatusForMediaType('vide');
console.log('authStatus:' + authStatus);
if (authStatus == 3) {
result = true;
console.log('相机权限已经开启');
} else {
console.log('相机权限没有开启');
}
plus.ios.deleteObject(AVCaptureDevice);
return result;
}
// 判断相册权限是否开启
function judgeIosPermissionPhotoLibrary() {
var result = false;
var PHPhotoLibrary = plus.ios.import('PHPhotoLibrary');
var authStatus = PHPhotoLibrary.authorizationStatus();
console.log('authStatus:' + authStatus);
if (authStatus == 3) {
result = true;
console.log('相册权限已经开启');
} else {
console.log('相册权限没有开启');
}
plus.ios.deleteObject(PHPhotoLibrary);
return result;
}
// 判断通讯录权限是否开启
function judgeIosPermissionContact() {
var result = false;
var CNContactStore = plus.ios.import('CNContactStore');
var cnAuthStatus = CNContactStore.authorizationStatusForEntityType(0);
if (cnAuthStatus == 3) {
result = true;
console.log('通讯录权限已经开启');
} else {
console.log('通讯录权限没有开启');
}
plus.ios.deleteObject(CNContactStore);
return result;
}
// 判断日历权限是否开启
function judgeIosPermissionCalendar() {
var result = false;
var EKEventStore = plus.ios.import('EKEventStore');
var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(0);
if (ekAuthStatus == 3) {
result = true;
console.log('日历权限已经开启');
} else {
console.log('日历权限没有开启');
}
plus.ios.deleteObject(EKEventStore);
return result;
}
// 判断备忘录权限是否开启
function judgeIosPermissionMemo() {
var result = false;
var EKEventStore = plus.ios.import('EKEventStore');
var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(1);
if (ekAuthStatus == 3) {
result = true;
console.log('备忘录权限已经开启');
} else {
console.log('备忘录权限没有开启');
}
plus.ios.deleteObject(EKEventStore);
return result;
}
// Android权限查询
function requestAndroidPermission(permissionID) {
return new Promise((resolve, reject) => {
plus.android.requestPermissions(
[permissionID], // 理论上支持多个权限同时查询，但实际上本函数封装只处理了一个权限的情况。有需要的可自行扩展封装
function (resultObj) {
var result = 0;
for (var i = 0; i < resultObj.granted.length; i++) {
var grantedPermission = resultObj.granted[i];
console.log('已获取的权限：' + grantedPermission);
result = 1;
}
for (var i = 0; i < resultObj.deniedPresent.length; i++) {
var deniedPresentPermission = resultObj.deniedPresent[i];
console.log('拒绝本次申请的权限：' + deniedPresentPermission);
result = 0;
}
for (var i = 0; i < resultObj.deniedAlways.length; i++) {
var deniedAlwaysPermission = resultObj.deniedAlways[i];
console.log('永久拒绝申请的权限：' + deniedAlwaysPermission);
result = -1;
}
resolve(result);
// 若所需权限被拒绝,则打开APP设置界面,可以在APP设置界面打开相应权限
// if (result != 1) {
// gotoAppPermissionSetting()
// }
},
function (error) {
console.log('申请权限错误：' + error.code + ' = ' + error.message);
resolve({
code: error.code,
message: error.message,
});
}
);
});
}
// 使用一个方法，根据参数判断权限
function judgeIosPermission(permissionID) {
if (permissionID == 'location') {
return judgeIosPermissionLocation();
} else if (permissionID == 'camera') {
return judgeIosPermissionCamera();
} else if (permissionID == 'photoLibrary') {
return judgeIosPermissionPhotoLibrary();
} else if (permissionID == 'record') {
return judgeIosPermissionRecord();
} else if (permissionID == 'push') {
return judgeIosPermissionPush();
} else if (permissionID == 'contact') {
return judgeIosPermissionContact();
} else if (permissionID == 'calendar') {
return judgeIosPermissionCalendar();
} else if (permissionID == 'memo') {
return judgeIosPermissionMemo();
}
return false;
}
// 跳转到**应用**的权限页面
function gotoAppPermissionSetting() {
if (isIos) {
var UIApplication = plus.ios.import('UIApplication');
var application2 = UIApplication.sharedApplication();
var NSURL2 = plus.ios.import('NSURL');
// var setting2 = NSURL2.URLWithString("prefs:root=LOCATION_SERVICES");
var setting2 = NSURL2.URLWithString('app-settings:');
application2.openURL(setting2);
plus.ios.deleteObject(setting2);
plus.ios.deleteObject(NSURL2);
plus.ios.deleteObject(application2);
} else {
// console.log(plus.device.vendor);
var Intent = plus.android.importClass('android.content.Intent');
var Settings = plus.android.importClass('android.provider.Settings');
var Uri = plus.android.importClass('android.net.Uri');
var mainActivity = plus.android.runtimeMainActivity();
var intent = new Intent();
intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
var uri = Uri.fromParts('package', mainActivity.getPackageName(), null);
intent.setData(uri);
mainActivity.startActivity(intent);
}
}
// 检查系统的设备服务是否开启
// var checkSystemEnableLocation = async function () {
function checkSystemEnableLocation() {
if (isIos) {
var result = false;
var cllocationManger = plus.ios.import('CLLocationManager');
var result = cllocationManger.locationServicesEnabled();
console.log('系统定位开启:' + result);
plus.ios.deleteObject(cllocationManger);
return result;
} else {
var context = plus.android.importClass('android.content.Context');
var locationManager = plus.android.importClass(
'android.location.LocationManager'
);
var main = plus.android.runtimeMainActivity();
var mainSvr = main.getSystemService(context.LOCATION_SERVICE);
var result = mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER);
console.log('系统定位开启:' + result);
return result;
}
}
module.exports = {
judgeIosPermission: judgeIosPermission,
requestAndroidPermission: requestAndroidPermission,
checkSystemEnableLocation: checkSystemEnableLocation,
gotoAppPermissionSetting: gotoAppPermissionSetting,
};
