【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。

相关文章

C++使用栈实现括号匹配的代码详解

C++使用栈实现括号匹配的代码详解

《C++使用栈实现括号匹配的代码详解》在编程中,括号匹配是一个常见问题,尤其是在处理数学表达式、编译器解析等任务时,栈是一种非常适合处理此类问题的数据结构,能够精确地管理括号的匹配问题,本文将通过C+... 目录引言问题描述代码讲解代码解析栈的状态表示测试总结引言在编程中，括号匹配是一个常见问题，尤其是在
阅读更多...
Java实现检查多个时间段是否有重合

Java实现检查多个时间段是否有重合

《Java实现检查多个时间段是否有重合》这篇文章主要为大家详细介绍了如何使用Java实现检查多个时间段是否有重合,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录流程概述步骤详解China编程步骤1：定义时间段类步骤2：添加时间段步骤3：检查时间段是否有重合步骤4：输出结果示例代码结语作
阅读更多...
使用C++实现链表元素的反转

使用C++实现链表元素的反转

《使用C++实现链表元素的反转》反转链表是链表操作中一个经典的问题,也是面试中常见的考题,本文将从思路到实现一步步地讲解如何实现链表的反转,帮助初学者理解这一操作,我们将使用C++代码演示具体实现,同... 目录问题定义思路分析代码实现带头节点的链表代码讲解其他实现方式时间和空间复杂度分析总结问题定义给定
阅读更多...
Java覆盖第三方jar包中的某一个类的实现方法

Java覆盖第三方jar包中的某一个类的实现方法

《Java覆盖第三方jar包中的某一个类的实现方法》在我们日常的开发中,经常需要使用第三方的jar包,有时候我们会发现第三方的jar包中的某一个类有问题,或者我们需要定制化修改其中的逻辑,那么应该如何... 目录一、需求描述二、示例描述三、操作步骤四、验证结果五、实现原理一、需求描述需求描述如下：需要在
阅读更多...
如何使用Java实现请求deepseek

如何使用Java实现请求deepseek

《如何使用Java实现请求deepseek》这篇文章主要为大家详细介绍了如何使用Java实现请求deepseek功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1.deepseek的api创建2.Java实现请求deepseek2.1 pom文件2.2 json转化文件2.2
阅读更多...
python使用fastapi实现多语言国际化的操作指南

python使用fastapi实现多语言国际化的操作指南

《python使用fastapi实现多语言国际化的操作指南》本文介绍了使用Python和FastAPI实现多语言国际化的操作指南,包括多语言架构技术栈、翻译管理、前端本地化、语言切换机制以及常见陷阱和... 目录多语言国际化实现指南项目多语言架构技术栈目录结构翻译工作流1. 翻译数据存储2. 翻译生成脚本
阅读更多...
如何通过Python实现一个消息队列

如何通过Python实现一个消息队列

《如何通过Python实现一个消息队列》这篇文章主要为大家详细介绍了如何通过Python实现一个简单的消息队列,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录如何通过 python 实现消息队列如何把 http 请求放在队列中执行1. 使用 queue.Queue 和 reque
阅读更多...
Python如何实现PDF隐私信息检测

Python如何实现PDF隐私信息检测

《Python如何实现PDF隐私信息检测》随着越来越多的个人信息以电子形式存储和传输,确保这些信息的安全至关重要,本文将介绍如何使用Python检测PDF文件中的隐私信息,需要的可以参考下... 目录项目背景技术栈代码解析功能说明运行结php果在当今，数据隐私保护变得尤为重要。随着越来越多的个人信息以电子形
阅读更多...
使用 sql-research-assistant进行 SQL 数据库研究的实战指南(代码实现演示)

使用 sql-research-assistant进行 SQL 数据库研究的实战指南(代码实现演示)

《使用sql-research-assistant进行SQL数据库研究的实战指南(代码实现演示)》本文介绍了sql-research-assistant工具,该工具基于LangChain框架,集... 目录技术背景介绍核心原理解析代码实现演示安装和配置项目集成LangSmith 配置（可选）启动服务应用场景
阅读更多...
使用Python快速实现链接转word文档

使用Python快速实现链接转word文档

《使用Python快速实现链接转word文档》这篇文章主要为大家详细介绍了如何使用Python快速实现链接转word文档功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 演示代码展示from newspaper import Articlefrom docx import
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2