更新记录
1.0.7(2024-07-24)
添加预览的返回
1.0.6(2024-07-05)
反正图片都返回正常的旋转角度 显示的时候img显示改成显示按等比高来显示
1.0.5(2024-07-03)
前摄像头拍照的照片镜像旋转
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.6.8,Android:6.0,iOS:不支持,HarmonyNext:不确定 | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
安卓原生自定义前后摄像头拍照,可同时设置前后摄像头预览,照片返回为base64
照片的大小不是设置的预览页面显示的大小,返回的图片宽高统一为设备宽高的大小。 需要打包自定调试包测试
调用插件 :
import {
openCamera,
previewCamera,
getCameraBase64,
closedCamera,
hideCameraH,
hideCameraQ,
} from "@/uni_modules/mushan-camera";
vue2需要自己去改一下调用方式
以下是vue3完整页面调用插件:
<template>
<view>
<button @click="switchAndCapture">打开前后摄像头</button>
<button @click="openCameraH">打开后视频</button>
<button @click="openCameraQ">打开前视频</button>
<button @click="UTSgetCameraBase64(0)">后摄像头拍照</button>
<button @click="UTSgetCameraBase64(1)">前摄像头拍照</button>
<button @click="UTSpreviewCamera(0)">后摄像头预览返回</button>
<button @click="UTSpreviewCamera(1)">前摄像头预览返回</button>
<button @click="closedCamera(0)">关闭后摄像头</button>
<button @click="closedCamera(1)">关闭前摄像头</button>
<button @click="hideCameraH(0)">隐藏后摄像头</button>
<button @click="hideCameraH(1)">显示后摄像头</button>
<button @click="hideCameraQ(0)">隐藏前摄像头</button>
<button @click="hideCameraQ(1)">显示前摄像头</button>
<image :src="img" mode="widthFix"></image>
<image :src="imgQ" mode="widthFix"></image>
<image :src="imgH" mode="widthFix"></image>
</view>
</template>
<script setup>
import {
onShow,
onReady,
onReachBottom,
onPullDownRefresh,
onShareAppMessage
}
from '@dcloudio/uni-app';
import {
getCurrentInstance,
ref,
reactive,
inject,
computed,
onMounted
} from 'vue';
import {
openCamera,
previewCamera,
getCameraBase64,
closedCamera,
hideCameraH,
hideCameraQ,
} from "@/uni_modules/mushan-camera";
async function switchAndCapture(){
await openCameraH()
await openCameraQ()
}
//后摄像头
async function openCameraH(){
return new Promise((resolve, reject) => {
let parame = {
cameraId:'0', //摄像头选择,0为后,1为前
someQuality:80, //拍照后的图片质量通常都是1 - 100
widthView:0.4, //预览显示的宽,按设备整体宽度百分比1为手机的宽。0.5为一半
heightView:0.4, //预览显示的高,按设备整体高度百分比1为手机的宽。0.5为一半
topMargin:0, //与顶部的距离,1为整个手机的高距离,0.5为一半
leftMargin:0, //与左边的距离,1为整个手机的宽距离,0.5为一半
}
openCamera(parame,res=>{
if(res){
resolve()
}
})
})
}
//前摄像头
async function openCameraQ(){
return new Promise((resolve, reject) => {
let parame = {
cameraId:'1',
someQuality:80,
widthView:0.3,
heightView:0.2,
topMargin:0,
leftMargin:0,
}
openCamera(parame,res=>{
if(res){
resolve()
}
})
})
}
//获取拍照
let img = ref('');
function UTSgetCameraBase64(num){
getCameraBase64(num,(res)=>{
img.value = filterBase64(`data:image/jpeg;base64,${res}`);
// console.log(img.value)
// console.log(res)
})
}
function filterBase64(codeImages){
return codeImages.replace(/[\r\n]/g, "");
}
//打开预览
let imgQ = ref('');
let imgH = ref('');
function UTSpreviewCamera(num){
previewCamera(num,(res)=>{
if(num == 1){
imgH.value = filterBase64(`data:image/jpeg;base64,${res}`);
}else{
imgQ.value = filterBase64(`data:image/jpeg;base64,${res}`);
}
})
}
</script>
<style lang="scss" scoped>
</style>