微信小程序相机组件进行拍照并直接预览并将照片写入缓存功能实现

在这里主要是用到了微信小程序官方文档中的一些API，本来写此篇博客是为了记录遇到的一个BUG，使用相机拍照相机会变色，但是这几天又变好了，估计是微信团队修改了底层的代码所致。既然没有BUG了，那么就主要写一下怎样实现拍照然后直接预览的吧。

---

（1）JS部分代码

// pages/test/test.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  takePhoto:function(){
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        console.log("拍照");
        this.setData({
          src: res.tempImagePath
        })
        /**
      * 预览图片
      */
        wx.previewImage({

          urls: [this.data.src],
        })
        /**
         * 设置缓存
         */
        console.log('开始保存')
        wx.setStorage({
          key: 'key1',
          data: this.data.src,
          success: function (res) {
            console.log('异步保存成功')
          }
        }),
          //获取缓存
          wx.getStorage({
            key: 'key1',
            success: function (res) {
              console.log(res.data)
            }
          })
        // wx.setStorageSync('key2', 'data2')
        // console.log('同步保存成功')


        /**
         * 在所拍照片上面显示预览界面
         */
        // wx.navigateTo({
        //   url: '../preview/preview?src='+res.tempImagePath,
        // })
      }
    })
  }

}) 

---

（2）wxml配置文件

<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 1100rpx;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>

（3）效果实现

1、拍照界面

2.预览界面

3.控制台打印输出

test.js? [sm]:85 开始保存
test.js? [sm]:90 异步保存成功
test.js? [sm]:97 http://tmp/wxfeb671d46a9754f1.o6zAJs9qC0nwMAUt0ozcV08Ug73M.a4f9b2c1af541dafa9f697f0ab2cebe1.jpg

4.原来微信小程序拍照会变色的bug图片。