vue3 里使用input type = file 来调用摄像头拍照， 如何在拍照的时候加上取景框

在 Vue3 中可以使用 `refs` 来引用 DOM 元素，利用这个特性可以实现在拍照时加上取景框的效果。具体步骤如下：

1. 在模板中添加 `<input type="file">` 元素，并添加 `ref` 属性来引用它：

<template>
  <div>
    <div ref="viewfinder" class="viewfinder"></div>
    <input type="file" accept="image/*" capture="camera" @change="takePicture" ref="camera">
  </div>
</template>

2. 在 `takePicture` 方法中获取 `input` 元素的 `files` 属性，利用 `URL.createObjectURL` 方法将其转换成一个可预览的 `blob` 对象，然后创建一个 `Image` 元素来预览拍摄的照片。同时，利用 `refs` 引用 `viewfinder` 元素，为其添加样式来实现取景框的效果：

export default {
  methods: {
    takePicture() {
      const file = this.$refs.camera.files[0];
      const url = URL.createObjectURL(file);
      const img = new Image();
      img.src = url;
      img.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        const viewfinder = this.$refs.viewfinder;
        canvas.width = viewfinder.offsetWidth;
        canvas.height = viewfinder.offsetHeight;
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        const previewUrl = canvas.toDataURL();
        // 在这里可以将 previewUrl 发送到后端进行保存或展示
      };
      viewfinder.style.width = '80%';
      viewfinder.style.height = '80%';
      viewfinder.style.border = '2px solid #fff';
      viewfinder.style.position = 'fixed';
      viewfinder.style.top = '10%';
      viewfinder.style.left = '10%';
      viewfinder.style.zIndex = '9999';
    },
  },
};

在上面的代码中，我们先获取了拍摄的照片，并将其转换成一个可预览的 `blob` 对象。然后，我们创建了一个 `Image` 元素来预览照片，在 `onload` 回调中绘制了取景框，并将绘制后的照片转换成了一个 `DataURL`，可以将其发送到后端进行保存或展示。

需要注意的是，我们在 `takePicture` 方法中使用了 `refs` 引用了 `viewfinder` 元素，并为其添加了样式来实现取景框的效果。在这里，我们将取景框的大小设置为 `80%`，并将其居中显示在屏幕上。同时，我们为其添加了一些样式，如边框和阴影效果，以提高用户体验。