【Vue】vue3 在图片上渲染 OCR 识别后的文本框、可复制文本组件

<template>
  <div class="ocr-text-box" :style="style">
    <div class="ocr-text" @click="copyText">
      {{ text }}
    </div>
  </div>
</template>
 
<script>
export default {
  props: {
    text: String,
    boundingBox: Object,
  },
  computed: {
    style() {
      const { top, left, width, height } = this.boundingBox;
      return {
        top: `${top}px`,
        left: `${left}px`,
        width: `${width}px`,
        height: `${height}px`,
      };
    },
  },
  methods: {
    copyText() {
      navigator.clipboard.writeText(this.text).then(
        () => console.log('Text copied to clipboard'),
        (error) => console.error('Failed to copy text:', error)
      );
    },
  },
};
</script>
 
<style scoped>
.ocr-text-box {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid #333;
  box-sizing: border-box;
  pointer-events: none;
}
 
.ocr-text {
  user-select: text;
  cursor: text;
}
</style>

这个Vue组件接收两个props：text 和 boundingBox。boundingBox 对象包含 OCR 识别文本框的位置和尺寸信息。计算属性 style 将这些信息转换成CSS样式，用于定位文本框。方法 copyText 使用浏览器的剪贴板API将文本复制到剪贴板，允许用户直接粘贴文本。该组件使用了 pointer-events: none 来防止文本框本身影响图片的交互，并使用了 user-select: text 和 cursor: text 来提供更好的文本选中和复制体验。