【uniapp】uniapp小程序中实现拍照同时打开闪光灯的功能，拍照闪光灯实现

2024-03-09 15:28
文章标签 uniapp 实现 程序 功能 打开 拍照 闪光灯

本文主要是介绍【uniapp】uniapp小程序中实现拍照同时打开闪光灯的功能，拍照闪光灯实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、需求前提

特殊场景中，需要拍照的同时打开闪光灯，（例如黑暗场景下的设备维护巡检功能）。

起初我是用的uviewui中的u-upload组件自带的拍照功能，但是这个不支持拍照时打开闪光灯，也不支持从通知栏中打开闪光灯。

二、解决方案

采用组合形式解决：

  1. 使用uniapp官方内置组件中的 媒体组件：camera 实现闪光灯拍照，uni.createCameraContext()获取返回图片结果
  2. 结合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.sync="test"></customUpload>* @Author: y* @Date: 2024-03-07 09:51:25
-->
<template><view class="custom-upload"><!-- 预览图片 --><template v-if="previewImage"><view class="file-item" v-for="(item,index) in fileList" :key="index" :style="[{width,height}]"><view v-if="item.status ==='uploading'" class="file-uploading"><u-loading-icon color="#19be6b"></u-loading-icon></view><u--image v-else :showLoading="true" :src="item.thumb || item.url" :width="width" :height="height"@tap="onPreviewImage(item)"><template v-slot:loading><!-- 此处后期需要优化为本地文件地址，避免走两次加载 --><u-loading-icon text="加载中" textSize="18"></u-loading-icon></template></u--image><!-- 删除按钮角标 --><view class="upload-deletable" @tap.stop="deleteItem(index)"><view class="upload-deletable-icon"><u-icon name="close" color="#ffffff" size="10"></u-icon></view></view><!-- 文件状态角标 --><view class="upload-success" v-if="item.status === 'success'"><view class="upload-success-icon"><u-icon name="checkmark" color="#ffffff" size="12"></u-icon></view></view></view></template><!-- 如果图片数量在设定范围内 --><template v-if="isInCount"><view class="upload-button" @tap="chooseOperationType" :style="[{width,height}]"><u-icon name="plus" size="26" color="#2979ff"></u-icon><text v-if="uploadText" class="upload-button-text">{{ uploadText }}</text><text v-else class="upload-button-text">上传</text></view></template><!-- 选项弹出层 --><u-popup :show="showOptionsPopup" :round="10" mode="bottom" :closeable="true" @close="this.showOptionsPopup=false"><view class="option-list"><view v-if="showTakePhoto" class="option-btn" @tap="onTakePhoto">拍照</view><view v-if="showChoosePhoto" class="option-btn" @tap="onChoosePhoto">从相册选择</view><view class="option-btn-close" @tap="this.showOptionsPopup=false">取消</view></view></u-popup><!-- 相机弹出层 --><u-overlay v-if="showCameraPopup" :show="showCameraPopup" mask-click-able="false"><!-- 添加v-if避免缓存相机，每次打开都需要重新创建 --><view class="camera-container"><camera device-position="back" :flash="flashStatus" style="width: 100%; height: calc(100% - 200rpx);"><cover-view class="user-location"><!-- 此处只可以使用cover-image插入图片（待开发） --><cover-view v-if="!userLocationRefreshing" class="icon-location"></cover-view><cover-view v-else class="icon-location-refreshing"></cover-view><cover-view v-if="userLocationRefreshing" style="color: #ff9900;">加载中...</cover-view><cover-view>{{userLocation||'---'}}</cover-view></cover-view></camera><view class="camera-option-list"><view class="option-btn" @tap.stop="$u.throttle(refreshLocation, 1000)">刷新定位</view><view class="option-btn" @tap.stop="takePhoto">拍照</view><view class="option-btn" @tap.stop="openFlash">{{flashStatus==='auto'?'闪光灯长亮':'闪光灯自动'}}</view></view></view></u-overlay></view>
</template><script>import { 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('预览图片失败')},});},}}
</script><style lang="scss">.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>

这篇关于【uniapp】uniapp小程序中实现拍照同时打开闪光灯的功能，拍照闪光灯实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/791092。

相关文章

windos server2022里的DFS配置的实现

windos server2022里的DFS配置的实现

《windosserver2022里的DFS配置的实现》DFS是WindowsServer操作系统提供的一种功能,用于在多台服务器上集中管理共享文件夹和文件的分布式存储解决方案,本文就来介绍一下wi... 目录什么是DFS？优势：应用场景：DFS配置步骤什么是DFS？DFS指的是分布式文件系统（Distr
阅读更多...
NFS实现多服务器文件的共享的方法步骤

NFS实现多服务器文件的共享的方法步骤

《NFS实现多服务器文件的共享的方法步骤》NFS允许网络中的计算机之间共享资源,客户端可以透明地读写远端NFS服务器上的文件,本文就来介绍一下NFS实现多服务器文件的共享的方法步骤,感兴趣的可以了解一... 目录一、简介二、部署1、准备1、服务端和客户端：安装nfs-utils2、服务端：创建共享目录3、服
阅读更多...
C#使用yield关键字实现提升迭代性能与效率

C#使用yield关键字实现提升迭代性能与效率

《C#使用yield关键字实现提升迭代性能与效率》yield关键字在C#中简化了数据迭代的方式,实现了按需生成数据,自动维护迭代状态,本文主要来聊聊如何使用yield关键字实现提升迭代性能与效率,感兴... 目录前言传统迭代和yield迭代方式对比yield延迟加载按需获取数据yield break显式示迭
阅读更多...
Python实现高效地读写大型文件

Python实现高效地读写大型文件

《Python实现高效地读写大型文件》Python如何读写的是大型文件,有没有什么方法来提高效率呢,这篇文章就来和大家聊聊如何在Python中高效地读写大型文件,需要的可以了解下... 目录一、逐行读取大型文件二、分块读取大型文件三、使用 mmap 模块进行内存映射文件操作（适用于大文件）四、使用 pand
阅读更多...
python实现pdf转word和excel的示例代码

python实现pdf转word和excel的示例代码

《python实现pdf转word和excel的示例代码》本文主要介绍了python实现pdf转word和excel的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录一、引言二、python编程1，PDF转Word2，PDF转Excel三、前端页面效果展示总结一
阅读更多...
Python xmltodict实现简化XML数据处理

Python xmltodict实现简化XML数据处理

《Pythonxmltodict实现简化XML数据处理》Python社区为提供了xmltodict库,它专为简化XML与Python数据结构的转换而设计,本文主要来为大家介绍一下如何使用xmltod... 目录一、引言二、XMLtodict介绍设计理念适用场景三、功能参数与属性1、parse函数2、unpa
阅读更多...
C#实现获得某个枚举的所有名称

C#实现获得某个枚举的所有名称

《C#实现获得某个枚举的所有名称》这篇文章主要为大家详细介绍了C#如何实现获得某个枚举的所有名称,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下... C#中获得某个枚举的所有名称using System;using System.Collections.Generic;usi
阅读更多...
Go语言实现将中文转化为拼音功能

Go语言实现将中文转化为拼音功能

《Go语言实现将中文转化为拼音功能》这篇文章主要为大家详细介绍了Go语言中如何实现将中文转化为拼音功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 有这么一个需求：新用户入职 创建一系列账号比较麻烦，打算通过接口传入姓名进行初始化。想把姓名转化成拼音。因为有些账号即需要中文也需要英
阅读更多...
C# 读写ini文件操作实现

C# 读写ini文件操作实现

《C#读写ini文件操作实现》本文主要介绍了C#读写ini文件操作实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录一、INI文件结构二、读取INI文件中的数据在C#应用程序中，常将INI文件作为配置文件，用于存储应用程序的
阅读更多...
C#实现获取电脑中的端口号和硬件信息

C#实现获取电脑中的端口号和硬件信息

《C#实现获取电脑中的端口号和硬件信息》这篇文章主要为大家详细介绍了C#实现获取电脑中的端口号和硬件信息的相关方法,文中的示例代码讲解详细,有需要的小伙伴可以参考一下... 我们经常在使用一个串口软件的时候，发现软件中的端口号并不是普通的COM1，而是带有硬件信息的。那么如果我们使用C#编写软件时候，如
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2