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

warning: 这篇文章距离上次修改已过337天,其中的内容可能已经有所变动。



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

VUE
最后修改于:2024年08月08日 08:43

评论已关闭

推荐阅读

AIGC实战——Transformer模型
2024年12月01日
Socket TCP 和 UDP 编程基础(Python)
2024年11月30日
python , tcp , udp
如何使用 ChatGPT 进行学术润色?你需要这些指令
2024年12月01日
AI
最新 Python 调用 OpenAi 详细教程实现问答、图像合成、图像理解、语音合成、语音识别(详细教程)
2024年11月24日
ChatGPT 和 DALL·E 2 配合生成故事绘本
2024年12月01日
omegaconf,一个超强的 Python 库!
2024年11月24日
【视觉AIGC识别】误差特征、人脸伪造检测、其他类型假图检测
2024年12月01日
[超级详细]如何在深度学习训练模型过程中使用 GPU 加速
2024年11月29日
Python 物理引擎pymunk最完整教程
2024年11月27日
MediaPipe 人体姿态与手指关键点检测教程
2024年11月27日
深入了解 Taipy:Python 打造 Web 应用的全面教程
2024年11月26日
基于Transformer的时间序列预测模型
2024年11月25日
Python在金融大数据分析中的AI应用(股价分析、量化交易)实战
2024年11月25日
AIGC Gradio系列学习教程之Components
2024年12月01日
Python3 `asyncio` — 异步 I/O,事件循环和并发工具
2024年11月30日
llama-factory SFT系列教程:大模型在自定义数据集 LoRA 训练与部署
2024年12月01日
Python 多线程和多进程用法
2024年11月24日
Python socket详解,全网最全教程
2024年11月27日
python之plot()和subplot()画图
2024年11月26日
理解 DALL·E 2、Stable Diffusion 和 Midjourney 工作原理
2024年12月01日