微信小程序实现了摄像头界面的定制

最近有个项目需要定制摄像头界面。之前用的是html编写的项目界面，但是用html定制相机界面非常困难，所以就想到用微信小程序定制相机界面。

以下组件和API主要用于实现微信小程序中的自定义摄像头功能。

1:相机组件

的常见属性是：

(1):模式

应用程序模式仅在初始化期间有效，不能动态更改。参数为：正常(相机模式)和扫描码(扫描码模式)，默认为正常。

(2):设备位置

相机方向，参数包括正面和背面，默认为背面。

(3):闪光

闪烁和关灯，参数为：auto(自动，手机摄像头当前闪烁状态)、on(闪开)和off(闪关)，默认为auto。

(4):binderror

不允许用户使用摄像头时触发事件。

例如：

camera device-position=' back ' flash=' off '/camera 2:拍照API(CameraContext.takePhoto)

参数描述：

(1)质量

成像质量，参数为：高(高质量)、正常(正常质量)和低(低质量)，默认为正常

(2)成功

成功调用接口的回调函数。

(3)失败

接口调用函数失败

示例：

//拍照wx。CreateCameraContext()。Takephoto ({Quality :' high '，//拍摄质量(high:高质量normal:普通质量low:高质量)成功：(RES)={///照片文件的临时文件varfile=Res. }，fail: (res)={//拍摄失败}，}) 3:上传照片文件API(uploadFile)

参数描述：

Url:上传文件的服务器地址

文件路径：要上传的文件资源的路径(本地路径)。

对应于name:文件的密钥，开发人员可以通过该密钥在服务器上获取文件的二进制内容。

formData:HTTP请求中的其他附加参数

成功：接口调用了一个成功的回调函数。

失败：接口调用失败的回调函数。

示例：

wx . choose image({ success(RES){ const tempfile path=RES . tempfile path wx . upload file({ URL 3360 '仅限3359Example.weixin.qq.com/upload',//are示例，虚幻接口地址file path : tempfile path \[0 \]，名称：' file '，form data 3360 { ' user ' : ' test ' }，success 3360(RES)={//成功上传}，fail 3360 function(t){//上传失败}，} } })4:4

(1): wxml结束：

！-pages/web/index . wxml-camerabinderror=' handleCameraError ' device-position=' { { device position } } ' flash=' off ' wx : if=' { { authCamera } } Cover-view Cover-image class=' line ' src='/images/outline . png '/Cover-image/Cover-view-view/camera Button type=' primary ' bind tap='拍照'拍照/Button type=' primary ' bind tap=' reverse camera '相机切换/Button view class=' error-toauth camera } } ' button class=' nobtn ' open type=' open setting '打开相机授权/按钮/视图(2): js端

//页面/网页/索引。js页面({/\ * \ * \ *页面的初始数据\ */data : {设备位置： ' back '，authCamera:false，//用户是否运行授权拍照}，handlecamera错误：函数(){ wx。showtoast({ title : '用户拒绝使用摄像头，icon:'none' }) }，reverse camera : function(){ this。setdata({设备位置： ' back '==this。数据。设备位置？前置' : '后置' });}，takePhoto:function(){ //拍摄照片wx.createCameraContext().takePhoto({ quality:'high '，//拍摄质量（高：高质量正常：普通质量low:高质量)成功：(res)={ //拍摄成功//照片文件的临时文件var file=RES . TempimagePathConsole . log(文件)//上传图片到服务器wx.uploadFile({ url:'XXXX '，//上传服务器地址文件路径：文件，名称："文件",表单数据：{"测试":"测试"},成功：(res)={ //上传成功}，fail:function(t){ //上传失败}，}) }，fail:(res)={ //拍摄失败}, }) }, /\*\* \*生命周期函数-监听页面显示\ */onshow : FuncTion(){ wx。get setting({ success :(RES)={ if(RES . authsetting \['作用域。摄像机' \]){这个。setdata({ authcamera a 3360 true，})else { this。setdata({ authcamera a 3360 false，})})；}, }) 具体相信如下：

在接口处理上传文件的流程和正常的表单上传文件流程相同，这里就不多叙述了