微信小程序怎么实现拍照功能，以和授权，拍完照保存到本地。

写微信小程序就是要不停的翻阅官方文档查阅所需要的需求。

API的使用说明

wx.getSetting 获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限 scope.camera相机

wx.authorize 提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据，但不会实际调用对应接口。
如果用户之前已经同意授权，则不会出现弹窗，直接返回成功
scope: 'scope.camera' 需要获取权限的 scope: scope.camera 摄像头

wx.showModal
显示模态对话框

wx.openSetting
调起客户端小程序设置界面，返回用户设置的操作结果。设置界面只会出现小程序已经向用户请求过的权限 res.authSetting['scope.camera']表示授权了相机

wx.createCameraContext
创建 camera 上下文 CameraContext 对象。
ctx.takePhoto拍摄照片 ctx.takePhoto({quality: 'high', //quality 成像质量 high 高质量})

wx.previewImage
在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作

wx.downloadFile
下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求，返回文件的本地临时路径 (本地路径)，单次下载允许的最大文件为 200MB。使用前请注意阅读相关说明。
注意：请在服务端响应的 header 中指定合理的 Content-Type 字段，以保证客户端正确处理文件类型。

wx.saveImageToPhotosAlbum
保存图片到系统相册。 filePath string 是 图片文件路径，可以是临时文件路径或永久文件路径 (本地路径) ，不支持网络路径

wx.showToast
显示消息提示框

index.js

1.  
   // index.js
2.  
    
3.  
   // const { Result } = require("element-ui")
4.  
    
5.  
   // 获取应用实例
6.  
   const app = getApp()
7.  
    
8.  
   Page({
9.  
   data: {
10.  
    isAuth: false,
11.  
    src: '',
12.  
    modalType: false, //弹框默认不显示
13.  
    imgUrl: "", //模拟图片
14.  
    },
15.  
     
16.  
     
17.  
     
18.  
    async onLoad() {
19.  
    const _this = this
20.  
    let res = await app.wx('getSetting')
21.  
    if (res.authSetting['scope.camera']) {
22.  
    // 用户已经授权
23.  
    _this.setData({isAuth: true})
24.  
    } else {
25.  
    // 用户还没有授权，向用户发起授权请求
26.  
    let authorize = await app.wx('authorize', {scope: 'scope.camera' })
27.  
    if(authorize.msg) {
28.  
    _this.setData({isAuth: true })
29.  
    }else {
30.  
    _this.openSetting().then(res => {_this.setData({isAuth: true})})
31.  
    }
32.  
    }
33.  
     
34.  
    },
35.  
     
36.  
    // 打开授权设置界面
37.  
    openSetting() {
38.  
    const _this = this
39.  
    let promise = new Promise((resolve, reject) => {
40.  
    wx.showModal({
41.  
    title: '授权',
42.  
    content: '请先授权获取摄像头权限',
43.  
    success(res) {
44.  
    if (res.confirm) {
45.  
    wx.openSetting({
46.  
    success(res) {
47.  
    if (res.authSetting['scope.camera']) { // 用户打开了授权开关
48.  
    resolve(true)
49.  
    } else { // 用户没有打开授权开关， 继续打开设置页面
50.  
    _this.openSetting().then(res => {
51.  
    resolve(true)
52.  
    })
53.  
    }
54.  
    },
55.  
    fail(res) {
56.  
    console.log(res)
57.  
    }
58.  
    })
59.  
    } else if (res.cancel) {
60.  
    _this.openSetting().then(res => {
61.  
    resolve(true)
62.  
    })
63.  
    }
64.  
    }
65.  
    })
66.  
    })
67.  
    return promise;
68.  
    },
69.  
     
70.  
    takePhoto() {
71.  
    const ctx = wx.createCameraContext()
72.  
    ctx.takePhoto({
73.  
    quality: 'high',
74.  
    success: (res) => {
75.  
    this.setData({
76.  
    src: res.tempImagePath
77.  
    })
78.  
    wx.previewImage({
79.  
    current: res.tempImagePath, // 当前显示图片的http链接
80.  
    urls: [res.tempImagePath] // 需要预览的图片http链接列表
81.  
    })
82.  
    this.save(res.tempImagePath)
83.  
    }
84.  
    })
85.  
     
86.  
    },
87.  
     
88.  
    save(imgUrl) {
89.  
    let _this = this
90.  
    let fileName = new Date().valueOf();
91.  
    wx.downloadFile({
92.  
    url: imgUrl,
93.  
    filePath: wx.env.USER_DATA_PATH '/' fileName '.jpg', //自定义临时资源路径
94.  
    success: (res) => {
95.  
    let filePath = res.filePath;
96.  
    wx.saveImageToPhotosAlbum({
97.  
    filePath,
98.  
    success(res) {
99.  
    console.log(res)
100.  
     app.wx('showToast',{
101.  
     title: '已保存到相册',
102.  
     icon: 'success',
103.  
     duration: 2000,
104.  
     })
105.  
     },
106.  
     fail(e) {
107.  
     console.log(e)
108.  
     wx.showToast({
109.  
     title: '保存失败，请重试',
110.  
     duration: 2000,
111.  
     icon: 'none',
112.  
     })
113.  
     if(e.errMsg == "saveImageToPhotosAlbum:fail auth deny"){
114.  
     _this.openSetting().then(res => {_this.setData({isAuth: true})})
115.  
     }
116.  
     },
117.  
     })
118.  
      
119.  
     }
120.  
     });
121.  
      
122.  
     },
123.  
     })

index.wxml

1.  
   <view class='camera'>
2.  
   <!-- <image src="https://blog.csdn.net/images/border.png" mode="widthFix"></image> -->
3.  
   <camera wx:if="{{isAuth}}" device-position="back" flash="off" binderror="error"></camera>
4.  
   </view>
5.  
   <button class="takePhoto" type="primary" bindtap="takePhoto">拍照</button>

index.wxss

1.  
   /**index.wxss**/
2.  
   .camera {
3.  
   width: 470rpx;
4.  
   height: 470rpx;
5.  
   border-radius: 50%;
6.  
   margin: 20px auto 0;
7.  
   position: relative;
8.  
   }
9.  
    
10.  
    .camera image {
11.  
    position: absolute;
12.  
    width: 100%;
13.  
    height: 100%;
14.  
    z-index: 10;
15.  
    }
16.  
     
17.  
    .camera camera {
18.  
    width: 428rpx;
19.  
    height: 428rpx;
20.  
    }
21.  
     
22.  
    button.takePhoto:not([size='mini']) {
23.  
    position: fixed;
24.  
    bottom: 0;
25.  
    left: 0;
26.  
    width: 100vw;
27.  
    height: 90rpx;
28.  
    border-radius: 0;
29.  
    }
30.  
     

app.js //这里我封装了wx 方法就是为了不使用 success函数和fail 函数，用async 和 await 就可以了。

1.  
   // app.js
2.  
    
3.  
    
4.  
   App({
5.  
   /**
6.  
   * 本方法就是为了使用能够async和await来获取结果，减少嵌套。
7.  
   * @attr 微信api的名字
8.  
   * @params 需要传入的参数
9.  
   *
10.  
    * const app = getApp()
11.  
    * let res = await app.wx('showModal',{title: '授权',content: '43534543',})
12.  
    console.log(432,res)
13.  
    * */
14.  
    wx(attr, params = {}) {
15.  
    console.log(32434, params )
16.  
    return new Promise((result, reject) => {
17.  
    let body = {
18.  
    success: res => {
19.  
    console.log(88888,res)
20.  
    result({...res,msg:attr == 'showModal' ? res.confirm : true})
21.  
    },
22.  
    fail: rej => {
23.  
    console.log(432999,rej)
24.  
    result({...rej,msg:attr == 'showModal' ? rej.confirm : false})
25.  
    }
26.  
    }
27.  
    for(let k in params){
28.  
    body[k] = params[k];
29.  
    }
30.  
    wx[attr](body)
31.  
    })
32.  
    },
33.  
    globalData: {
34.  
    userInfo: null
35.  
    }
36.  
    })

我是阿豪