微信小程序实现拍照界面自定义实现微信小程序实现拍照界面自定义实现
最近有一个项目需要对拍照界面进行自定义，之前使用的是html写的项目界面，但是在html中想要自定义拍照界面十分的困难,
于是想到了使用微信小程序来实现拍照界面的自定义
在微信小程序中实现自定义拍照功能主要使用到如下的组件和API
1：camera组件
常见的属性有:
(1)：mode
应用模式，只在初始化时有效，不能动态变更，参数有：normal(相机模式),scanCode(扫码模式) ，默认为normal
(2)：device-position
摄像头朝向，参数有front(前置),back(后置)，默认为back
(3)：flash
闪关灯，参数有：auto(自动,手机相机目前的闪光灯状态), on(打开闪光灯), off(关闭闪光灯)，默认为auto
(4)：binderror
用户不允许使用摄像头时触发事件
例如:
<camera device-position="back" flash="off" >
</camera>
2：拍摄照片API(CameraContext.takePhoto)
参数说明：
(1)quality
成像质量,参数有：high(高质量),normal(普通质量),low(低质量)，默认为normal
(2)success
接口调用成功的回调函数
(3)fail
接口调用失败的回调函数
例如：
//拍摄照片
wx.createCameraContext().takePhoto({
quality: 'high',//拍摄质量(high:高质量 normal:普通质量 low:高质量)
success: (res) => {
//拍摄成功
//照片文件的临时文件
var file = res.tempImagePath;
},
fail: (res) => {
//拍摄失败
},
})
3:上传拍照文件API(uploadFile)
参数说明：
url:上传文件的服务器地址
filePath:要上传文件资源的路径 (本地路径)
name:文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容
formData:HTTP 请求中其他额外的参数
评论0