uni-app 插件需求 拍照时显示参照矩形框

在uni-app中实现拍照时显示参照矩形框的功能，可以利用Canvas和uni-app提供的相机组件来完成。以下是一个简单的代码示例，展示了如何在拍照预览界面上绘制一个参照矩形框。

首先，你需要在页面的.vue文件中引入并使用<camera>组件和<canvas>组件。<camera>组件用于捕获图像，而<canvas>组件用于绘制参照矩形框。

<template>
  <view class="container">
    <camera id="myCamera" device-position="back" flash="auto" @error="error"></camera>
    <canvas canvas-id="myCanvas" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></canvas>
    <button @click="takePhoto">拍照</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      context: null,
    };
  },
  mounted() {
    this.initCanvas();
  },
  methods: {
    initCanvas() {
      const query = uni.createSelectorQuery().in(this);
      query.select('#myCanvas').fields({ node: true, size: true }).exec((res) => {
        const canvas = res[0].node;
        const ctx = canvas.getContext('2d');
        this.context = ctx;
        this.drawRectangle(ctx, canvas.width, canvas.height);
      });
    },
    drawRectangle(ctx, width, height) {
      const rectWidth = width * 0.2; // 矩形框宽度占画布宽度的20%
      const rectHeight = height * 0.2; // 矩形框高度占画布高度的20%
      const left = (width - rectWidth) / 2; // 矩形框左边距
      const top = (height - rectHeight) / 2; // 矩形框上边距
      ctx.setStrokeStyle('red'); // 矩形框颜色
      ctx.setLineWidth(5); // 矩形框线条宽度
      ctx.strokeRect(left, top, rectWidth, rectHeight); // 绘制矩形框
    },
    takePhoto() {
      uni.createCameraContext().takePhoto({
        quality: 'high',
        success: (res) => {
          // 处理拍照结果
          console.log(res.tempImagePath);
        },
        fail: (err) => {
          console.error(err);
        },
      });
    },
    error(e) {
      console.error(e.detail);
    },
  },
};
</script>

<style>
.container {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>

在这个示例中，<camera>组件用于显示相机预览画面，<canvas>组件用于在相机预览画面上绘制矩形框。initCanvas方法获取Canvas上下文并在其上绘制矩形框。takePhoto方法用于拍照。

注意，这个示例中的矩形框是静态的，始终位于画布的中心，并且大小根据画布的宽度和高度动态调整。你可以根据需要调整矩形框的位置和大小，或者添加更多复杂的逻辑来动态更新矩形框的位置和大小。