网站建设济南,毕业设计 旅游网站建设,vr技术在网站建设的应用,58同城网招聘找工作下载安装一、需求前提
特殊场景中#xff0c;需要拍照的同时打开闪光灯#xff0c;#xff08;例如黑暗场景下的设备维护巡检功能#xff09;。
起初我是用的uviewui中的u-upload组件自带的拍照功能#xff0c;但是这个不支持拍照时打开闪光灯#xff0c;也不支持从通知栏中打开…一、需求前提
特殊场景中需要拍照的同时打开闪光灯例如黑暗场景下的设备维护巡检功能。
起初我是用的uviewui中的u-upload组件自带的拍照功能但是这个不支持拍照时打开闪光灯也不支持从通知栏中打开闪光灯。
二、解决方案
采用组合形式解决
使用uniapp官方内置组件中的 媒体组件camera 实现闪光灯拍照uni.createCameraContext()获取返回图片结果结合uniapp官方内置组件中的 视图容器cover-view 做定制化布局
1. 媒体组件camera
camera 是页面内嵌的区域相机组件。注意这不是点击后全屏打开的相机。 其中flash属性可以动态实现拍照闪光灯的功能值为auto, on, off, torch
拍照动作可以使用uni.createCameraContext()获取拍照的图片结果再做后续操作。
注意
camera 组件是由客户端创建的原生组件它的层级是最高的不能通过 z-index 控制层级。可使用 cover-view 、cover-image 覆盖在上面。同一页面只能插入一个 camera 组件。(多次打开自定义的拍照界面可以使用v-if做销毁)
2. 视图容器cover-view
cover-view是覆盖在原生组件上的文本视图。 app-vue和小程序框架渲染引擎是webview的。但为了优化体验部分组件如map、video、textarea、canvas通过原生控件实现原生组件层级高于前端组件类似flash层级高于div。为了能正常覆盖原生组件设计了cover-view。
注意
容器内的每一个元素最好都用cover-view标签包裹包括文字内容否则会出现渲染异常问题。
三、 示例 !--* Description: 自定义文件上传组件支持拍照、闪光灯、本地图片选择* Doc: 双向绑定使用 customUpload :modelValue.synctest/customUpload* Author: y* Date: 2024-03-07 09:51:25
--
templateview classcustom-upload!-- 预览图片 --template v-ifpreviewImageview classfile-item v-for(item,index) in fileList :keyindex :style[{width,height}]view v-ifitem.status uploading classfile-uploadingu-loading-icon color#19be6b/u-loading-icon/viewu--image v-else :showLoadingtrue :srcitem.thumb || item.url :widthwidth :heightheighttaponPreviewImage(item)template v-slot:loading!-- 此处后期需要优化为本地文件地址避免走两次加载 --u-loading-icon text加载中 textSize18/u-loading-icon/template/u--image!-- 删除按钮角标 --view classupload-deletable tap.stopdeleteItem(index)view classupload-deletable-iconu-icon nameclose color#ffffff size10/u-icon/view/view!-- 文件状态角标 --view classupload-success v-ifitem.status successview classupload-success-iconu-icon namecheckmark color#ffffff size12/u-icon/view/view/view/template!-- 如果图片数量在设定范围内 --template v-ifisInCountview classupload-button tapchooseOperationType :style[{width,height}]u-icon nameplus size26 color#2979ff/u-icontext v-ifuploadText classupload-button-text{{ uploadText }}/texttext v-else classupload-button-text上传/text/view/template!-- 选项弹出层 --u-popup :showshowOptionsPopup :round10 modebottom :closeabletrue closethis.showOptionsPopupfalseview classoption-listview v-ifshowTakePhoto classoption-btn taponTakePhoto拍照/viewview v-ifshowChoosePhoto classoption-btn taponChoosePhoto从相册选择/viewview classoption-btn-close tapthis.showOptionsPopupfalse取消/view/view/u-popup!-- 相机弹出层 --u-overlay v-ifshowCameraPopup :showshowCameraPopup mask-click-ablefalse!-- 添加v-if避免缓存相机每次打开都需要重新创建 --view classcamera-containercamera device-positionback :flashflashStatus stylewidth: 100%; height: calc(100% - 200rpx);cover-view classuser-location!-- 此处只可以使用cover-image插入图片待开发 --cover-view v-if!userLocationRefreshing classicon-location/cover-viewcover-view v-else classicon-location-refreshing/cover-viewcover-view v-ifuserLocationRefreshing stylecolor: #ff9900;加载中.../cover-viewcover-view{{userLocation||---}}/cover-view/cover-view/cameraview classcamera-option-listview classoption-btn tap.stop$u.throttle(refreshLocation, 1000)刷新定位/viewview classoption-btn tap.stoptakePhoto拍照/viewview classoption-btn tap.stopopenFlash{{flashStatusauto?闪光灯长亮:闪光灯自动}}/view/view/view/u-overlay/view
/templatescriptimport { mapState, mapActions } from vuex;import { apiUrl } from /utils/env.js; // 全局项目地址export default {name: customUpload,props: {// 对外上传的文件列表 {status:success|uploading|fail, url:}modelValue: {type: Array,default: () []},showTakePhoto: {type: Boolean,default: true},showChoosePhoto: {type: Boolean,default: true},// 上传组件的宽度width: {type: String,default: 180rpx},// 上传组件的高度height: {type: String,default: 180rpx},// 上传图标的文字uploadText: {type: String,default: },// 上传文件的存储位置fileStorageLocation: {type: String,default: yhtest},},data() {return {fileList: [], // 对内上传的文件列表 {status:success|uploading|fail, url:}isFileError: false, // 文件列表出现故障待开发previewImage: false, // 预览图片isInCount: true, // 是在限制的文件数量范围内showOptionsPopup: false, // 选项弹出层showCameraPopup: false, // 相机弹出层flashStatus: auto, // 闪光灯值为auto, on, off, torchuserLocationRefreshing: false, // 用户位置刷新中userLocation: , // 用户位置};},watch: {// 监听文件列表数据长度变化存在数据则显示预览fileList(newData, oldData) {this.$emit(update:modelValue, newData);this.previewImage newData.length ? true : false;},modelValue: {handler: function(newData, oldData) {this.fileList newData;},immediate: true,deep: true}},computed: {...mapState([userInfo]),},async created() {this.flashStatus auto;},methods: {// 引入vuex中方法...mapActions([getUserLocation]),// 选择操作类型chooseOperationType() {this.showOptionsPopup true;this.refreshLocation(); // 获取定位},// 拍照onTakePhoto() {this.flashStatus auto;this.showOptionsPopup false;this.showCameraPopup true;},//从文件夹选择onChoosePhoto() {this.showOptionsPopup false;uni.chooseMedia({count: 9,mediaType: [image, video], // 文件类型sourceType: [album], // 指定从相册获取maxDuration: 30,success: async (res) {// 按顺序执行异步操作异步迭代for (let item of res.tempFiles) {const tempUrl item.tempFilePath;console.log(拍照的临时图片地址, tempUrl);this.fileList.push({status: uploading, // 状态为上传中url: tempUrl, // 文件的临时地址thumb: tempUrl, // 文件的临时地址});const realUrl await this.uploadFilePromise(item.tempFilePath); // 上传图片console.log(上传返回的真实图片地址, realUrl);this.fileList.pop();this.fileList.push({status: success, // 状态为上传中url: realUrl, // 文件的真实地址thumb: tempUrl, // 文件的临时地址});}},fail: (err) {console.log(文件夹选择报错, err);},})},// 手动拍照async takePhoto() {console.log(拍照按钮点击---------, new Date());// 创建并返回 camera 组件的上下文 cameraContext 对象const ctx uni.createCameraContext();setTimeout(() {this.showCameraPopup false; // 关闭弹出层}, 200);await ctx.takePhoto({quality: high,success: async (res) {uni.$u.toast(拍摄成功);// 返回照片文件的临时路径const tempUrl res.tempImagePath;console.log(拍照的临时图片地址, tempUrl);this.fileList.push({status: uploading, // 状态为上传中url: tempUrl, // 文件的临时地址thumb: tempUrl, // 文件的临时地址});const realUrl await this.uploadFilePromise(res.tempImagePath); // 上传图片console.log(上传返回的真实图片地址, realUrl);this.fileList.pop();this.fileList.push({status: success, // 状态为上传中url: realUrl, // 文件的真实地址thumb: tempUrl, // 文件的临时地址});},fail: (err) {console.log(手动拍照报错, err);},});},// 打开闪光灯openFlash() {if (this.flashStatus auto) {this.flashStatus torch; // 闪光灯长亮} else {this.flashStatus auto; // 闪光灯长亮}},// 刷新定位async refreshLocation() {this.userLocationRefreshing true;this.userLocation await this.getUserLocation(); // 获取用户位置信息setTimeout(() {this.userLocationRefreshing false;}, 1000)},// 上传图片async uploadFilePromise(filePath) {return new Promise((resolve, reject) {let token Bearer ;token uni.getStorageSync(token);let a uni.uploadFile({url: ${apiUrl}/wx/wxfile/upload, // 接口地址filePath: filePath,name: multipartFile, // 此处默认值是file,实际需要根据后端接口做更改header: {Content-Type: multipart/form-data,Authorization: token},// HTTP 请求中其他额外的 form dataformData: {cameraMan: this.userInfo.nickName || ---, // 拍摄人cameraSite: this.userLocation || ---, // 拍摄位置customPath: this.fileStorageLocation, // 自定义文件存放路径},success: (res) {let parseData JSON.parse(res.data);console.log(上传成功的地址, parseData);resolve(parseData.data);}});})},// 按下标删除图片deleteItem(index) {this.fileList.splice(index, 1);},// 预览图片onPreviewImage(item) {if (item.status ! success) return;uni.previewImage({// 先filter找出为图片的item再返回filter结果中的图片urlurls: this.fileList.filter((item) item.status success item.url).map((item) item.url || item.thumb),current: item.url || item.thumb,fail() {uni.$u.toast(预览图片失败)},});},}}
/scriptstyle langscss.custom-upload {// border: 1px dashed red;display: flex;flex-direction: row;flex-wrap: wrap;.file-item {position: relative;display: flex;flex-direction: column;justify-content: center;align-items: center;border-radius: 2px;margin: 0 8px 8px 0;box-sizing: border-box;.upload-deletable {position: absolute;top: 0;right: 0;background-color: #373737;height: 14px;width: 14px;display: flex;flex-direction: row;border-bottom-left-radius: 100px;align-items: center;justify-content: center;z-index: 3;.upload-deletable-icon {position: absolute;-webkit-transform: scale(0.7);transform: scale(0.7);top: 0px;right: 0px;}}.upload-success {position: absolute;bottom: 0;right: 0;display: flex;flex-direction: row;border-style: solid;border-top-color: transparent;border-left-color: transparent;border-bottom-color: #5ac725;border-right-color: #5ac725;border-width: 9px;align-items: center;justify-content: center;.upload-success-icon {position: absolute;-webkit-transform: scale(0.7);transform: scale(0.7);bottom: -10px;right: -10px;}}}.upload-button {padding: 10rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: #f4f5f7;border-radius: 2px;margin: 0 8px 8px 0;box-sizing: border-box;.upload-button-text {margin-top: 8rpx;color: #ccc;text-align: center;}}.option-list {display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 40rpx 40rpx 20rpx 40rpx;.option-btn {border-bottom: 1px solid #ccc6;padding: 30rpx;width: 100%;text-align: center;font-size: 16px;}.option-btn-close {padding: 30rpx;width: 100%;text-align: center;font-size: 16px;}}.camera-container {position: relative;width: 100%;height: 100%;.user-location {position: absolute;bottom: 20rpx;left: 20rpx;padding: 20rpx;background-color: #cccccc9c;color: #fff;border-radius: 10rpx;display: flex;flex-direction: row;justify-content: center;align-items: center;.icon-location {width: 30rpx;height: 30rpx;border-radius: 50%;background-color: #19be6b;margin: 6rpx;border: 2px solid #ecddd5;}.icon-location-refreshing {width: 30rpx;height: 30rpx;border-radius: 50%;background-color: #ff9900;margin: 6rpx;border: 2px solid #ecddd5;}}.camera-option-list {width: 100%;height: 200rpx;background-color: #f4f5f7;display: flex;flex-direction: row;.option-btn {display: flex;flex-direction: column;justify-content: center;border: 2px solid #2979ff;box-sizing: border-box;height: 100%;width: 33.33%;text-align: center;font-size: 18px;}}}}
/style
