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

示例图：
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 地址并展现

如有问题，请斧正，心愿能帮到大家