微信小程序关于拍照预览图片上传等

示例图：
1：在小程序可见页面增加一个图片展示区域，并给定一个点击事件可以唤起拍照

2：允许小程序使用相机权限后进入拍照页面（页面增加了一个头像放置区域，返回按钮，拍摄按钮，摄像头转换按钮）

3：点击拍照按钮拍照

4：拍照后进入照片预览页面（页面提供返回重拍和裁剪后预览确认功能，如图红框区域为截图区域，可按照需求自行区域裁剪）

5：裁剪后进入图片预览，并将图片转换成base64格式，与后端接口进行对接

文件代码

centre：示例图1
carame：示例图2,3,4
preview：示例图5
we-cropper:提供示例图4的缩放和剪裁功能（静态资源文件，下载后直接放到pages文件夹下，在carema.js中引入即可，官网下载可点击）

代码摘要
示例图1：按钮触发后，进入carema页面
示例图2：

<view class="caream-wrap">
  <camera device-position="{{cameraPos}}" class="carema-area" wx:if="{{showCamera}}">
    <camera-view class="carema-anchor">
      <image mode="widthFix" class="carema-anchor-img" src="/images/anchor.png"></image>
    </camera-view>
  </camera>
  <view class="CameraOptions" wx:if="{{showCamera}}">
    <view class="takePicBtn">
      <!-- 摄像头的返回按钮 -->
      <view class="takephotoicon">
        <image mode="widthFix" class="confirm" src="/images/caremaback.png" bindtap="goBack"></image>
      </view>
      <!-- 照相的按钮 -->
      <view bindtap="getPhoto" class="takephotoicon">
        <view class="outter-shoot">
          <view class="inner-shoot"></view>
        </view>
      </view>
      <!-- 摄像头的前后转换按钮 -->
      <view class="takephotoicon">
        <image mode="widthFix" class="switch" src="/images/switch.png" bindtap='changePos'></image>
      </view>
    </view>
  </view>
<!--剪裁区域-->
  <import src="../we-cropper/we-cropper.wxml" />
  <view class="cropper-wrapper" wx:if="{{!showCamera}}">
    <template is="we-cropper" data="{{...cropperOpt}}" />
  </view>
  <view class="cropper-buttons" wx:if="{{!showCamera}}">
    <view class="cancel" bindtap="handleCloseCropper">重拍</view>
    <view class="getCropperImage" bindtap="getCropperImage">确定并预览</view>
  </view>
</view>

js

import WeCropper from '../we-cropper/we-cropper.js'
const device = wx.getSystemInfoSync(); // 获取设备信息
const width = device.windowWidth; // 获取设备宽，方便设置画布和裁剪框宽度
const height = device.windowHeight; // 获取设备高，方便设置画布和裁剪框高度

Page({
  data: {
    cropperOpt: {
      id: 'cropper', // 用于手势操作的canvas组件标识符
      targetId: 'targetCropper', // 用于用于生成截图的canvas组件标识符
      pixelRatio: device.pixelRatio, // 传入设备像素比
      width, // 画布宽度
      height: 413, // 画布高度
      scale: 2.5, // 最大缩放倍数
      zoom: 8, // 缩放系数
      src: "",
      cut: {
        x: (width - 295) / 2, // 裁剪框x轴起点
        y: 0, // 裁剪框y轴期起点
        width: 295, // 裁剪框宽度
        height: 413 // 裁剪框高度
      }
    },
    imageUrl: "",
    cameraPos: 'front',
    showCamera: true,
    wecropper: ''
  },
  // 照相
  getPhoto() {
    // c创建相机上下文对象,获取唯一的相机对象
    var context = wx.createCameraContext()
    // 照相功能
    context.takePhoto({
      quality: "low",
      success: res => {
        // 照相成功的回调
        console.log(res); // 图片的信息
        this.setData({
          // 隐藏相机
          showCamera: false,
          imageUrl: res.tempImagePath,
          src: res.tempImagePath,
        })
        // 实例化WeCropper
        this.createCropper();
      },
      fail: () => {
        wx.showToast({
          title: '出现错误',
        })
      }
    })
  },
  createCropper() {
    const that = this
    let {
      cropperOpt
    } = that.data
    cropperOpt.src = that.data.imageUrl;
    let wecropper = new WeCropper(cropperOpt).on('ready', (ctx) => {}).on('beforeImageLoad', (ctx) => {

    }).on('imageLoad', (ctx) => {})
    this.setData({
      wecropper,
    })
  },
  // 相机前后镜头转换
  changePos() {
    this.setData({
      cameraPos: this.data.cameraPos == "back" ? "front" : "back"
    })
  },
  // 关闭相机,回退到个个人中心
  goBack() {
    wx.switchTab({
      url: '../centre/centre',
    })
  },
  //点击取消裁剪
  handleCloseCropper() {
    console.log(11111)
    this.setData({
      showCamera: true
    });
  },
  touchStart(e) {
    this.wecropper.touchStart(e)
  },
  touchMove(e) {
    this.wecropper.touchMove(e)
  },
  touchEnd(e) {
    this.wecropper.touchEnd(e)
  },
  getCropperImage() {
    wx.setStorageSync('caremapreview', null);
    this.data.wecropper.getCropperImage((tempFilePath) => {
      console.log(tempFilePath)
      // tempFilePath 为裁剪后的图片临时路径
      if (tempFilePath) {
        this.setData({
          // 隐藏相机
          imageUrl: tempFilePath
        })
        wx.getImageInfo({
          src: tempFilePath,
          success(imageInfo) {
            let imgType = imageInfo.type
            wx.getFileSystemManager().readFile({
              filePath: tempFilePath,
              encoding: "base64",
              success: res => {
                //返回base64格式
                let base64Str = 'data:image/' + imgType + ';base64,' + res.data
                wx.setStorageSync('caremapreview', {
                  imgurl: base64Str,
                });
                wx.navigateTo({
                  url: '../preview/preview',
                })
              },
              fail: err => {
                console.log(err)
              }
            })
          }
        })

      } else {
        wx.showModal({
          title: '获取图片地址失败，请稍后重试',
          icon: 'success'
        })
      }
    })
  },
})

核心方法说明
getCropperImage()完成了剪裁图片临时地址的额获取，并且在获得地址后使用微信自带的wx.getFileSystemManager().readFile()方法完成了将temp地址转换成base64格式。base64暂存入StorageSync，便于preview页面获取base64地址并展示

如有问题，请指正，希望能帮到大家