小程序中实现拍照,自拍功能

前言：

       小程序中实现自拍功能，拍照功能。

官网入口

目录

实现效果：

实现步骤：

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-dialog
                use-slot
                title="签到"
                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

到此就结束了，有任何问题，欢迎一起探讨！