微信小程序拍照截取指定区域图片

### 效果图
![](https://oss.mukang.net/blog/2020/12/0716073344680193322.jpeg)
## 实现步骤

1. 获取拍摄图片（wx.createCameraContext()）
2. canvas绘制拍摄图片（wx.wx.createCanvasContext()）
3. canvas导出指定区域 （wx.canvasToTempFilePath()）


### 话不多少  直接上代码

> wxml


```html
<camera wx:if='{{isShowCamera}}' class="camera-box" devic-position="width" flash="off" style='width:{{windowWidth}}px; height:{{windowHeight}}px;'>
  <cover-view class='camerabgImage'>
    <cover-view class="active">
      <cover-image class="active-image" src="https://oss.mukang.net/blog/2020/12/0716073342969601272.png"></cover-image>
      <cover-view class="text">请将VIN码放入框中，点击拍照进行识别</cover-view>
    </cover-view>
    <cover-view class="btn" bindtap="takePhotoAction">
      <cover-view class="button"></cover-view>
    </cover-view>
  </cover-view>
</camera>

<canvas wx:if='{{isShowImage}}' canvas-id="image-canvas" id="canvas"
        style='width:{{windowWidth}}px; height:{{windowHeight}}px;'></canvas>
```

> wxss

```css

 
.camera-box {
  width: 100vw;
  height: 100vh
}

.camera-box .camerabgImage {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0
}

.camera-box .camerabgImage .active {
  position: absolute;
  top: 400rpx;
  left: 36rpx;
  right: 36rpx
}

.camera-box .camerabgImage .active-image {
  display: block;
  width: 680rpx;
  height: 280rpx
}

.camera-box .camerabgImage .text {
  text-align: center;
  margin-top: 56rpx;
  margin-bottom: 240rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #D9D9D9;
  line-height: 40rpx
}

.camera-box  .btn {
  position: fixed;
  left: 50%;
  bottom: 120rpx;
  margin-left: -55rpx;
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
  background: #fff;
  border: 6rpx solid#fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.camera-box   .btn .button {
  width: 102rpx;
  height: 102rpx;
  border-radius: 50%;
  border: 4rpx solid#000
}
.canvas{
  position: absolute;
  top: -10000rpx;
  left: -10000rpx;
}
```

>js

```javascript
// 创建页面实例对象
Page({
  // 页面的初始数据
  data: {
    isShowCamera: false,
    isShowImage: true,
    image: '',
    windowWidth: '',
    windowHeight: ''
  },
  onLoad() {
    /**
     * @name: 创建 拍照  获取  可视区域宽高
     * @description:
     * @version: 
     * @author: WangJian
     * @time: 2021-01-22 10:34:39
     */
    this.ctx = wx.createCameraContext()
    let {windowWidth, windowHeight} = wx.getSystemInfoSync()
    this.setData({windowWidth, windowHeight})
  },
  onShow: function () {
    /**
     * @name: 获取摄像头权限
     * @description: 授权失败返回上一页
     * @version: 
     * @author: WangJian
     * @time: 2021-01-22 10:35:28
     */
    var that = this
    wx.authorize({
      scope: 'scope.camera',
      success: function (res) {
        that.setData({
          isShowCamera: true,
        })
      },
      fail: function (res) {
        console.log("" + res);
        wx.showModal({
          title: '请求授权您的摄像头',
          content: '如需正常使用此小程序功能，请您按确定并在设置页面授权用户信息',
          confirmText: '确定',
          success: res => {
            if (res.confirm) {
              wx.openSetting({
                success: function (res) {
                  console.log('成功');
                  console.log(res);
                  if (res.authSetting['scope.camera']) { //设置允许获取摄像头
                    console.log('设置允许获取摄像头')
                    wx.showToast({
                      title: '授权成功',
                      icon: 'success',
                      duration: 1000
                    })
                    that.setData({
                      isShowCamera: true,
                    })

                  } else { //不允许
                    wx.showToast({
                      title: '授权失败',
                      icon: 'none',
                      duration: 1000
                    })
                    wx.navigateBack({delta: 1})
                  }
                }
              })
            } else { //取消
              wx.showToast({
                title: '授权失败',
                icon: 'none',
                duration: 1000
              })
              wx.navigateBack({delta: 1})

            }
          }
        })

      }
    })
  },
  /**
   * @name: 拍照
   * @description: 详细参数可参考官方文档
   * @version: 
   * @author: WangJian
   * @time: 2021-01-22 10:36:17
   */
  takePhotoAction: function () {
    var that = this
    that.ctx.takePhoto({
      quality: 'high', //高质量
      success: (res) => {
        that.loadTempImagePath(res.tempImagePath);
      },
      fail(error) {
        console.log(error)
      }
    })
  },
  /**
   * @name: canvas绘制拍照图片
   * @description:
   * @version: 
   * @author: WangJian
   * @time: 2021-01-22 10:36:45
   */
  loadTempImagePath: function (options) {
    var that = this
    wx.getSystemInfo({
      success: function (res) {
        // px与rpx之间转换的公式：px = rpx / 750 * wx.getSystemInfoSync().windowWidth;
        var image_x = 36 / 750 * that.data.windowWidth; // x 坐标位置
        var image_y = 400 / 750 * that.data.windowWidth; // y 坐标位置
        var image_width = 680 / 750 * that.data.windowWidth; // 图片宽度
        var image_height = 280 / 750 * that.data.windowWidth; // 图片高度
        console.log(image_x, image_y, image_width, image_height)
        wx.getImageInfo({
          src: options,
          success: function (res) {
            that.setData({
              isShowImage: true,
            })
            that.canvas = wx.createCanvasContext("image-canvas", that)
            //过渡页面中，图片的路径坐标和大小
            that.canvas.drawImage(options, 0, 0, that.data.windowWidth, that.data.windowHeight)
            wx.showLoading({
              title: '数据处理中...',
              icon: 'loading',
              duration: 10000
            })
            that.canvas.draw()
            setTimeout(function () {
              wx.canvasToTempFilePath({ //裁剪对参数
                canvasId: "image-canvas",
                x: image_x, //画布x轴起点
                y: image_y, //画布y轴起点
                width: image_width, //画布宽度
                height: image_height, //画布高度
                destWidth: image_width, //输出图片宽度
                destHeight: image_height, //输出图片高度
                success: function (res) {
                  // 生成本地文件路径  可上传服务器
                  console.log(res.tempFilePath);
                  that.setData({
                    image: res.tempFilePath,
                  })
                  // 生成base64 图片格式
                  wx.hideLoading()
                  console.log(res.tempFilePath);
                  wx.getFileSystemManager().readFile({
                    filePath: res.tempFilePath,  //图片路径
                    encoding: 'base64', //编码格式
                    success: result => { //成功的回调
                      console.log('data:image/png;base64,' + result.data)
                    },
                    fail: function (e) {
                      wx.hideLoading()
                      wx.showToast({
                        title: '出错啦...',
                        icon: 'loading'
                      })
                    }
                  });
                }
              })
            }, 1000);
          }
        })
      }
    })
  },
});
```

---

博客描述

微信小程序拍照截取指定区域图片