小程序中实现拍照,自拍功能
前言：
小程序中实现自拍功能，拍照功能。
官网入口
目录
实现效果：
实现步骤：
1、index.wxml,我这里是用了vant的框架，如果不想要，直接把里面的camera和底下的button拿走使用
配置属性api，更多请看最下面的api
2、index.js部分，需要在camera组件中调用相关函数才能实现拍照功能
配置方法api，更多请看最下面的api
（1）data部分
（2）拍照功能和打开弹框功能，如果没有使用vant,只用第一个就够用了
配置的api参考文档：
1、camera
2、CameraContext.takePhoto(Object object)拍摄照片
更多参考文献：
实现效果：
（小程序开发模式下无法查看，必须真机调试手机上才可以看效果，底下这个是自拍效果）
这里使用的是camera是实现的效果。
实现步骤：
1、index.wxml,我这里是用了vant的框架，如果不想要，直接把里面的camera和底下的button拿走使用
配置属性api，更多请看最下面的api
|
属性名 |
类型 |
默认值 |
说明 |
|---|---|---|---|
|
mode |
String |
normal |
有效值为 normal, scanCode |
|
device-position |
String |
back |
前置或后置，值为front, back |
|
flash |
String |
auto |
闪光灯，值为auto, on, off |
|
bindstop |
EventHandle |
摄像头在非正常终止时触发，如退出后台等情况 |
|
|
binderror |
EventHandle |
用户不允许使用摄像头时触发 |
|
|
bindscancode |
EventHandle |
在扫码识别成功时触发，仅在 mode="scanCode" 时生效 |
<view class="page__bd"><van-button bindtap='openPhotoModal'>签到</van-button><van-dialoguse-slottitle="签到"show="{{ photo_show }}"confirm-button-text="拍照"bind:confirm="takePhoto"><camera device-position="front" flash="on" style="width: 100%; height: 450px;"></camera><!--<button type="primary" bindtap="takePhoto">拍照</button>--></van-dialog><b-map></b-map></view>
2、index.js部分，需要在camera组件中调用相关函数才能实现拍照功能
配置方法api，更多请看最下面的api
|
属性 |
类型 |
默认值 |
是否必填 |
说明 |
|---|---|---|---|---|
|
quality |
string |
normal |
否 |
成像质量 |
|
success |
function |
否 |
接口调用成功的回调函数 |
|
|
fail |
function |
否 |
接口调用失败的回调函数 |
|
|
complete |
function |
否 |
接口调用结束的回调函数（调用成功、失败都会执行） |
（1）data部分
data: {img_src:'',//自拍图片photo_show:false,//自拍弹框是否显示},（2）拍照功能和打开弹框功能，如果没有使用vant,只用第一个就够用了
/*** 拍照功能* */takePhoto() {const ctx = wx.createCameraContext()ctx.takePhoto({quality: 'high',success: (res) => {this.setData({img_src: res.tempImagePath,photo_show: false})}})},/*** 打开自拍弹框* */openPhotoModal(){this.setData({photo_show: true})},配置的api参考文档：
1、camera
基础库 1.6.0 开始支持，低版本需做兼容处理。
系统相机。扫码二维码功能，需升级微信客户端至6.7.3。需要用户授权 scope.camera。 2.10.0起 initdone 事件返回 maxZoom，最大变焦范围，相关接口 CameraContext.setZoom。
相关api：wx.createCameraContext
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| mode | string | normal | 否 | 应用模式，只在初始化时有效，不能动态变更 | 2.1.0 |
| resolution | string | medium | 否 | 分辨率，不支持动态修改 | 2.10.0 |
| device-position | string | back | 否 | 摄像头朝向 | 1.0.0 |
| flash | string | auto | 否 | 闪光灯，值为auto, on, off | 1.0.0 |
| frame-size | string | medium | 否 | 指定期望的相机帧数据尺寸 | 2.7.0 |
| bindstop | eventhandle | 否 | 摄像头在非正常终止时触发，如退出后台等情况 | 1.0.0 | |
| binderror | eventhandle | 否 | 用户不允许使用摄像头时触发 | 1.0.0 | |
| bindinitdone | eventhandle | 否 |
相机初始化完成时触发，e.detail = {maxZoom}
|
2.7.0 | |
| bindscancode | eventhandle | 否 | 在扫码识别成功时触发，仅在 mode="scanCode" 时生效 | 2.1.0 |
mode 的合法值
| 值 | 说明 | 最低版本 |
|---|---|---|
| normal | 相机模式 | |
| scanCode | 扫码模式 |
resolution 的合法值
| 值 | 说明 | 最低版本 |
|---|---|---|
| low | 低 | |
| medium | 中 | |
| high | 高 |
device-position 的合法值
| 值 | 说明 | 最低版本 |
|---|---|---|
| front | 前置 | |
| back | 后置 |
flash 的合法值
| 值 | 说明 | 最低版本 |
|---|---|---|
| auto | 自动 | |
| on | 打开 | |
| off | 关闭 | |
| torch | 常亮 | 2.8.0 |
frame-size 的合法值
| 值 | 说明 | 最低版本 |
|---|---|---|
| small | 小尺寸帧数据 | |
| medium | 中尺寸帧数据 | |
| large | 大尺寸帧数据 |
2、CameraContext.takePhoto(Object object)拍摄照片
参数
Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| quality | string | normal | 否 | 成像质量 |
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
object.quality 的合法值
| 值 | 说明 | 最低版本 |
|---|---|---|
| high | 高质量 | |
| normal | 普通质量 | |
| low | 低质量 |
object.success 回调函数
参数
Object res
| 属性 | 类型 | 说明 |
|---|---|---|
| tempImagePath | string | 照片文件的临时路径 (本地路径)，安卓是jpg图片格式，ios是png |
更多参考文献：
https://cloud.tencent.com/developer/article/1361745
到此就结束了，有任何问题，欢迎一起探讨！
小程序中实现拍照,自拍功能相关推荐
- 在微信小程序中打开地图选择位置功能
在微信小程序中打开地图选择位置功能 前言 首先查看效果 一.准备工作 1-1. **下载小程序地理定位** ,[qqmap-wx-jssdk.js](https://lbs.qq.com/miniPr ...
- 在微信开发者工具中 实现微信小程序之相机拍照及其相关功能的开发
微信小程序 - 相关知识 技术扩展 - 微信小程序 - 相机拍照功能 微信开发:前端 + 后端 小程序开发 - 准备工作:JavaScript + HTML + CSS 小程序 - 面向微信框架技术开 ...
- 如何实现消息功能_小程序中如何实现即时通信聊天功能
微信小程序是现在应用比较广的流量平台之一,当流量越来越多时,就需要在小程序中接入即时通信聊天功能来实现更好的流量变现转化,那么小程序中如何接入实现即时通信聊天功能呢? 什么是即时通信聊天功能即时通信聊 ...
- 如何在Datawhale开源学习小程序中创建队伍？
我们的组队学习马上就要开营了,本次组队学习与以往不同的是小程序中增加了组队的功能.为了方便大家组队,Datawhale的 六一同学 为大家准备了在Datawhale开源学习小程序中创建队伍的教程. S ...
- php地址选择插件,微信小程序中关于三级联动地址选择器的实例分享
本文介绍了微信小程序三级联动地址选择器的实例代码,分享给大家,有需要的可以一起了解一下 在一些电商类的小程序中,地址选择这个功能一般是必备的,一般的收货信息都需要有一个能选择省市县的控件,当然也有些人 ...
- 如何在微信小程序中下载APP？
如何在微信小程序中下载APP? 可能的方案 官方api接口:--目前小程序官方未提供专门下载APP的接口:小程序目前是不允许将流量导出到APP之外,所以合理推断,该方案短期内并不可行. 通过web-v ...
- 在微信小程序中如何下载APP？
关注小编微信公众号公众号[前端基础教程从0开始]回复"1",拉你进程序员技术讨论群,群内有大神,可以免费提供问题解答.公众号回复"小程序",领取300个优秀的小 ...
- 小程序（十六）小程序仿微信聊天页面及功能
后期打算在小程序中添加即时聊天的功能,但是目前这个还没有考虑好以一种什么样的形势去实现,先接入一个腾讯AI提供的免费闲聊接口.先做一个大概的页面及功能. 腾讯AI地址: https://ai.qq.c ...
- 小程序中无法播放阿里云的视频点播
背景 视频直接存在自己的服务器,视频大了会存在卡顿现象,只能用阿里云或其它服务商的相关服务. 原来在APP中已有了视频播放的功能,而且已经能正常使用,但视频的url是 http. 现在期望在小程序中也 ...
最新文章
- opensips中db_default_url解析存在的bug
- 实例讲解Linux系统中硬链接与软链接的创建
- 【C 语言】数组 ( 指针数组用法 | 命令行参数处理 )
- Android复习08【内容提供者】
- 从外部调用Django模块
- ios django 连接mysql_Django---Django连接Mysql数据库
- 最小生成树——安慰奶牛（蓝桥杯试题集）
- 解决idea创建ssm项目找不到mybatis的mapper的xml文件问题
- 三十岁左右的你正处于什么状态？
- bypass最新版d盾mysql_Bypass D盾_IIS防火墙SQL注入防御（多姿势）
- Python — — turtle 常用代码
- 5G学习笔记之RRC_IDLE/RRC_INACTIVE态UE功能概述
- Android N for Developers
- python如何横向输出_python数据竖着怎么变横的？
- CPU与CUDA(GPU)的计算能力对比之二: Keras Resnet 运算效率比较
- 设计模式|职责链模式--流程状态审批（枚举实现）
- 用友服务器系统,用友软件 用友云服务器
- linux 下的 包过滤器 BPF
- （转）硬盘分区备忘（主分区，扩展分区和逻辑分区）以及Linux硬盘分区工具parted 介绍...
- 永洪Desktop实例分享｜星巴克数据指标体系建设及炫酷可视化大屏搭建