Vue实现:Ctrl+V粘贴文字图片截图,调用第三方API文字识别OCR内容并进行内容分割识别填充。

简介: Vue实现:Ctrl+V粘贴文字图片截图,调用第三方API文字识别OCR内容并进行内容分割识别填充。


paste组件

<template>
    <div>
        <el-button type="success" icon="el-icon-copy-document"
            @click="pasteText = '', visible = true">快捷粘贴(Ctrl+V)</el-button>
        <el-dialog 
            title="粘贴信息" 
            :visible.sync="visible" 
            append-to-body 
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <el-input type="textarea" ref="textarea" :rows="10" placeholder="输入文字信息或直接粘贴图片" v-model="pasteText"
                maxlength="1000" show-word-limit @paste="paste"></el-input>
            <i class="upload-bg-img el-icon-picture"></i>
            <div slot="footer" class="dialog-footer">
                <el-button @click="close">取消</el-button>
                <el-button type="primary" @click="ok">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import $ from 'jquery';//cnpm i jquery -s
export default {
    data() {
        return {
            pasteText: '',
            visible: false,
        };
    },
    destroyed(d) {
        document.removeEventListener('paste', this.paste)
    },
    created() {
        document.addEventListener('paste', this.paste)
    },
    methods: {
        // 粘贴
        paste(event) {
            if (this.visible) return;
            // 文本----------------------------------------
            const text = (event.clipboardData || window.clipboardData).getData('text');
            if (text && text.trim()) {
                // console.log('粘贴的文本', text);
                this.pasteText = text;
                this.handleText(this.pasteText);
                return;
            }
            // 图片----------------------------------------
            let image = null;
            const items = (event.clipboardData || window.clipboardData).items;
            if (!items || items.length === 0) return this.$message.error('当前浏览器不支持本地打开图片,请复制粘贴文本内容!');
            for (let i = 0; i < items.length; i++) {
                if (items[i].type.indexOf('image') !== -1) {
                    image = items[i].getAsFile();
                    break;
                }
            }
            if (image) {
                // console.log('粘贴的图片', image);
                this.handleImage(image);
                return;
            }
            if (!text || !image) return this.$message.error('请粘贴文本或图片');
        },
        handleText(d) {
            let aa = d
                .replace(/\n(\n)*( )*(\n)*\n/g, "\n")//去掉多余空行
                .split('\n');//每一行作为一条数据
            let r = [];
            for (let i = 0, len = aa.length; i < len; i++) {
                let a = aa[i].trim().replace(/\s+/g, " ");//将连续多余空格缩减为一个空格
                a && r.push(a.split(" "));
            }
            this.$emit('result', r);
        },
        handleImage(d) {
            const reader = new FileReader();
            reader.readAsDataURL(d);
            reader.onload = e => {
                // e.target.result 即为base64结果
                let data = { image: e.target.result }
                data = JSON.stringify(data);
                // 粘贴上传图片接口调用(帮助文档:https://www.apispace.com/eolink/api/ocrbase/apiDocument#scroll=0) 
                $.ajax({
                    url: "https://eolink.o.apispace.com/ocrbase/ocr/v1/base",
                    method: "POST",
                    headers: {
                        "X-APISpace-Token": "自己去www.apispace.com申请",
                        "Authorization-Type": "apikey",
                        "Content-Type": "application/json"
                    },
                    data,
                    crossDomain: true
                })
                    .done(d => {
                        this.pasteText = d.words_result.map(v => v.word).join('\n')
                        this.visible = true;
                    })
                    .fail(d => {
                        this.$message.error(JSON.parse(d.responseText).msg);
                    });
            };
        },
        // 取消
        close(d) {
            this.visible = false;
        },
        // 确定
        ok(d) {
            if (this.pasteText && this.pasteText.trim()) {
                this.handleText(this.pasteText);
                this.close();
            } else this.$message.error(this.$refs.textarea.$el.querySelector("textarea").placeholder);
        },
    }
};
</script>
<style lang="scss" scoped>
.dialog-footer {
    display: flex;
    &>* {
        width: 100%;
    }
}
>>>.el-textarea {
    z-index: 1;
    .el-textarea__inner {
        min-height: 200px !important;
        max-height: 500px;
        background-color: transparent;
    }
}
.upload-bg-img {
    display: block;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100px;
    height: 100px;
    font-size: 100px;
    transform: translateY(-10px);
    color: #eee;
    pointer-events: none;
    z-index: 0;
}
</style>

调用paste组件

<paste @result="pasteResult"></paste>
...
import paste from "@/vue/components/paste";
...
components: {
    paste,
},
...
pasteResult(d) {
    console.log(JSON.stringify(d, null, 2));//输入内容见下面gif截图
},


相关文章
|
7月前
|
机器学习/深度学习 文字识别 Shell
高效率办公PDF批量处理:批量OCR识别PDF区域文字内容,用PDF内容批量改名或导出表格的货物运单应用案例
针对铁路货运物流单存档需求,本项目基于WPF与飞桨OCR技术,实现批量图片多区域文字识别与自动重命名。用户可自定义识别区域,系统提取关键信息(如车号、批次号)并生成规范文件名,提升档案管理效率与检索准确性,支持PDF及图像文件处理。
1015 48
|
7月前
|
机器学习/深度学习 文字识别 Linux
Umi-OCR_文字识别工具 免安装使用教程(附下载安装包)!永久免费,开源离线OCR识别软件下载
Umi-OCR是一款开源免费、支持离线运行的高精度OCR文字识别工具,基于深度学习技术,可快速识别中文、英文、日文等多种语言。无需联网,保护隐私,适用于Windows和Linux系统,解压即用,操作简便,是处理图片转文本的理想选择。
4120 7
|
11月前
|
人工智能 文字识别 自然语言处理
熊猫 OCR 识别软件下载,支持截图 OCR、PDF 识别、多语言翻译的免费全能工具,熊猫OCR识别
本文介绍了几款实用的图文识别软件,包括熊猫OCR、Umi-OCR和天若OCR_本地版。熊猫OCR功能强大,支持多窗口操作、AI找图找色、OCR识别等;Umi-OCR免费且高效,具备截图OCR、批量处理等功能;天若OCR界面简洁,适合快速文字识别。文章还提供了下载链接及软件特点、界面展示等内容,便于用户根据需求选择合适的工具。
1227 36
|
12月前
|
机器学习/深度学习 文字识别 自然语言处理
OCR技术:解锁文字识别的无限可能
OCR(光学字符识别)技术是数字化浪潮中的关键工具,可将纸质文档、手写笔记或复杂背景下的文字图像转化为可编辑文本。本文从图像采集、预处理、字符识别到文本校正,全面解析OCR技术的原理,并探讨其在智能办公、智慧交通、便捷生活等领域的广泛应用。未来,OCR将与自然语言处理、计算机视觉等技术深度融合,推动智能化和综合化发展。通过开放生态系统和政策支持,开发者可探索更多创新场景,如古籍数字化、盲人阅读等,为社会带来更多价值。
2135 57
|
人工智能 文字识别 API
moonshot-v1-vision-preview:月之暗面Kimi推出多模态视觉理解模型,支持图像识别、OCR文字识别、数据提取
moonshot-v1-vision-preview 是月之暗面推出的多模态图片理解模型,具备强大的图像识别、OCR文字识别和数据提取能力,支持API调用,适用于多种应用场景。
2634 6
moonshot-v1-vision-preview:月之暗面Kimi推出多模态视觉理解模型,支持图像识别、OCR文字识别、数据提取
|
编解码 文字识别 自然语言处理
如何使用OCR技术批量识别图片中的文字并重命名文件,OCR 技术批量识别图片中的文字可能出现的错误
### 简介 【批量识别图片内容重命名】工具可批量识别图片中的文字并重命名文件,方便高效处理大量图片。然而,OCR 技术面临字符识别错误(如形近字混淆、生僻字识别不佳)、格式错误(段落错乱、换行问题)和语义理解错误等挑战。为提高准确性,建议提升图片质量、选择合适的 OCR 软件及参数,并结合自动校对与人工审核,确保最终文本的正确性和完整性。
2296 12
如何使用OCR技术批量识别图片中的文字并重命名文件,OCR 技术批量识别图片中的文字可能出现的错误
|
文字识别 UED Python
对双栏 | 单双栏混合 | 图表文字混合的复杂布局的图片OCR识别(对布局复杂的整个pdf进行OCR识别)
这个故事告诉我们要多尝试不同的库和引擎,尤其是需求比较偏门或者少见的时候。同一个方向不同的库所擅长的领域是不一样的。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
人工智能 自然语言处理 JavaScript
鸿蒙 Next 对接 AI API 实现文字对话功能指南
本指南介绍如何在鸿蒙 Next 系统中对接 AI API,实现文字对话功能。首先通过 DevEco Studio 创建项目并配置网络权限,选择合适的 AI 服务(如华为云或百度文心一言)。接着,使用 Node.js 转发请求,完成客户端与服务器端代码编写。最后进行功能测试与优化,确保多轮对话顺畅、性能稳定。此过程需严格遵循开发规范,充分利用系统资源,为用户提供智能化交互体验。
624 0
|
存储 人工智能 文字识别
AI与OCR:数字档案馆图像扫描与文字识别技术实现与项目案例
本文介绍了纸质档案数字化的技术流程,包括高精度扫描、图像预处理、自动边界检测与切割、文字与图片分离抽取、档案识别与文本提取,以及识别结果的自动保存。通过去噪、增强对比度、校正倾斜等预处理技术,提高图像质量,确保OCR识别的准确性。平台还支持多字体识别、批量处理和结构化存储,实现了高效、准确的档案数字化。具体应用案例显示,该技术在江西省某地质资料档案馆中显著提升了档案管理的效率和质量。
1894 1
|
移动开发 前端开发 JavaScript
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
2438 1

热门文章

最新文章