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

本文涉及的产品
教育场景识别,教育场景识别 200次/月
车辆物流识别,车辆物流识别 200次/月
企业资质识别,企业资质识别 200次/月
简介: 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截图
},


相关文章
|
3月前
|
机器学习/深度学习 文字识别 前端开发
基于 Spring Boot 3.3 + OCR 实现图片转文字功能
【8月更文挑战第30天】在当今数字化信息时代,图像中的文字信息越来越重要。无论是文档扫描、名片识别,还是车辆牌照识别,OCR(Optical Character Recognition,光学字符识别)技术都发挥着关键作用。本文将围绕如何使用Spring Boot 3.3结合OCR技术,实现图片转文字的功能,分享工作学习中的技术干货。
193 2
|
3月前
|
机器学习/深度学习 人工智能 文字识别
轻松识别文字,这款Python OCR库支持超过80种语言
轻松识别文字,这款Python OCR库支持超过80种语言
|
4月前
|
文字识别
印刷文字识别使用问题之影响印刷体文字识别率包括哪些
印刷文字识别产品,通常称为OCR(Optical Character Recognition)技术,是一种将图像中的印刷或手写文字转换为机器编码文本的过程。这项技术广泛应用于多个行业和场景中,显著提升文档处理、信息提取和数据录入的效率。以下是印刷文字识别产品的一些典型使用合集。
|
4月前
|
文字识别 API 开发工具
印刷文字识别使用问题之如何提高OCR的识别率
印刷文字识别产品,通常称为OCR(Optical Character Recognition)技术,是一种将图像中的印刷或手写文字转换为机器编码文本的过程。这项技术广泛应用于多个行业和场景中,显著提升文档处理、信息提取和数据录入的效率。以下是印刷文字识别产品的一些典型使用合集。
|
4月前
|
存储 文字识别
印刷文字识别使用问题之处理超过40M的图片时,不返回结果是什么原因
印刷文字识别产品,通常称为OCR(Optical Character Recognition)技术,是一种将图像中的印刷或手写文字转换为机器编码文本的过程。这项技术广泛应用于多个行业和场景中,显著提升文档处理、信息提取和数据录入的效率。以下是印刷文字识别产品的一些典型使用合集。
|
4月前
|
人工智能 文字识别 开发工具
印刷文字识别使用问题之是否支持识别并返回文字在图片中的位置信息
印刷文字识别产品,通常称为OCR(Optical Character Recognition)技术,是一种将图像中的印刷或手写文字转换为机器编码文本的过程。这项技术广泛应用于多个行业和场景中,显著提升文档处理、信息提取和数据录入的效率。以下是印刷文字识别产品的一些典型使用合集。
|
3月前
|
数据采集 机器学习/深度学习 文字识别
OCR -- 文本检测 - 训练DB文字检测模型
OCR -- 文本检测 - 训练DB文字检测模型
78 0
|
3月前
|
机器学习/深度学习 文字识别 算法
百度飞桨(PaddlePaddle) - PaddleHub OCR 文字识别简单使用
百度飞桨(PaddlePaddle) - PaddleHub OCR 文字识别简单使用
267 0
|
4月前
|
文字识别 API 数据处理
印刷文字识别使用问题之对于带钢印的VIN图片如何提高识别准确率
印刷文字识别产品,通常称为OCR(Optical Character Recognition)技术,是一种将图像中的印刷或手写文字转换为机器编码文本的过程。这项技术广泛应用于多个行业和场景中,显著提升文档处理、信息提取和数据录入的效率。以下是印刷文字识别产品的一些典型使用合集。
|
4月前
|
人工智能 文字识别 Java
印刷文字识别使用问题之识别出的文字如何直接保存到Word文档中进行编辑
印刷文字识别产品,通常称为OCR(Optical Character Recognition)技术,是一种将图像中的印刷或手写文字转换为机器编码文本的过程。这项技术广泛应用于多个行业和场景中,显著提升文档处理、信息提取和数据录入的效率。以下是印刷文字识别产品的一些典型使用合集。

热门文章

最新文章

下一篇
无影云桌面