uni-app实现拍照功能

news/2024/12/5 5:59:30/

直接些这样的组件代码

<template><view><button @click="takePhoto">拍照</button><image :src="photoUrl" v-if="photoUrl" mode="aspectFit"></image></view>
</template><script>
export default {data() {return {photoUrl: '', // 存储拍照后的照片路径}},methods: {takePhoto() {uni.chooseImage({count: 1, // 最多选择1张照片sourceType: ['camera'], // 从相机选择照片success: (res) => {this.photoUrl = res.tempFilePaths[0]; // 获取拍照后的照片路径},fail: (err) => {console.log('拍照失败', err);}});}}
}
</script>

然后我们用手机访问

然后点击上方的拍照按钮
在这里插入图片描述
然后 他就会很自然的打开我们的手机相机
在这里插入图片描述
我们拍完确定之后 photoUrl就很自然的拿到了图片的结果
在这里插入图片描述


http://www.ppmy.cn/news/1157391.html

相关文章

RocketMQ的长轮询(Long Polling)实现分析

目录 前言 长轮询 1.实现步骤 1.1客户端轮询发送请求 1.2服务端处理数据 1.3客户端接收数据 2.实现实例 RocketMQ长轮询 1.PullMessage服务 2.PullMessageProcessor服务 3.PullCallback回调 总结 前言 消息队列一般在消费端都会提供push和pull两种模式&#xff0c;…

React TreeSelect设置默认展开项的方法

需要实现TreeSelect组件的onTreeExpand、treeExpandedKeys方法。 代码样例如下&#xff1a; 1.TreeSelect标签部分 render() {const {codeselect} this.props;const {treeExpandedKeys} this.state ................<TreeSelectshowSearch{false}dropdownStyle{{ maxHei…

vue小写数字转大写-例如:11转为十一

vue小写数字转大写-例如&#xff1a;11转为十一 在Vue中&#xff0c;可以使用自定义过滤器&#xff08;Custom Filter&#xff09;来将数字转换为大写的形式。 下面是一个示例&#xff1a; // main.js import Vue from vue;Vue.filter(toChineseNumber, function (value) {c…

24、Flink 的table api与sql之Catalogs(java api操作数据库、表)-2

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…

incStrong() 和 decStrong()

在 Android JNI 层代码中&#xff0c;incStrong() 和 decStrong() 是在使用跨越 JNI 边界的对象时常见的方法。它们用于在本地代码中增加和减少对象的引用计数。这些方法通常用于管理对象的生命周期&#xff0c;以确保在不再需要对象时能够正确释放资源。 在 Android 中&#…

图像边缘检测--(Sobel、Laplacian、Canny)

1、图像中各种形状的检测时计算机视觉领域中非常常见的技术之一,特别是图像中直线的检测,圆的检测,图像边缘的检测等,下面将介绍如何快速检测图像边缘。 2、边缘是不同区域的分界线,是周围(局部)像素有显著变化的像素的集合,有幅值与方向两个属性。这个不是绝对的定义,…

IDEA的使用(四)创建不同类型的工程(IntelliJ IDEA 2022.1.3版本)

1. 创建Java工程 创建之后&#xff0c;src下是空的。可以在src下创建软件包Package&#xff0c;命名采用域名倒序。在软件包下再创建Java类。Java类运行后出现中文乱码&#xff0c;就到控制台和文件编码这两个地方设置编码。 2. 创建JavaWeb工程 2.1 在win11和IDEA中配置Tomca…

C# RestoreFormer 图像修复

效果 项目 代码 using Microsoft.ML.OnnxRuntime; using Microsoft.ML.OnnxRuntime.Tensors; using OpenCvSharp; using System; using System.Collections.Generic; using System.Drawing; using System.Drawing.Imaging; using System.Windows.Forms;namespace 图像修复 {pu…