文本，paddocr的资料，base64转文字的相关源码，效果更好是点击button录了代码库-阿里云开发者社区

文本，paddocr的资料，base64转文字的相关源码，效果更好是点击button录了代码库

2024-07-04 30

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 文本，paddocr的资料，base64转文字的相关源码，效果更好是点击button录了代码库

写好的资料：

能够完成数据的传递的资料，在until的Base64ViewApp这个文件

正确的axios的请求：

    console.log(typeof imgArr[1]);
        axios.post('http://localhost:9090/text/text-only',{
                            imgBase64: imgArr[1],
                            imgType: 'png' }).then(function(res){
                                that.resdata = res.data;
                                    that.resdata.forEach((v)=>{
                                    that.str = that.str + v.text
                                })
                                console.log(that.str)
                            });

这里将字符串的数据进行切割

切割字段的写法

前端页面展示怎样做？这里如何让打印识别的数据出现在前端页面进行展示：

<template>
   <h2>复制或剪切图片后以ctrl + V 粘贴</h2>
   <img id="img" src="" alt="">
   <!-- {{ base64 }} -->
   <button @click="setPasteImg()">测试</button>
   <div>内容是{{ shuju }}</div>
</template>
 
<script>
 
import axios from "axios";
export default {
    data() {
      return {
        shuju:'',
        base64:'',
        Str:'',
        str : "",
      }
    },
    methods: {
        setPasteImg(base64){
            //粘贴事件
            // var that = this;
            // var base64;
            // var base64;
            console.log(base64)
            document.addEventListener('paste', function(event){
                // var b1 = '';
            
                // if (event.clipboardData || event.originalEvent) {
                    var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
                    if(clipboardData.items){
                        var  blob;
                        for (var i = 0; i < clipboardData.items.length; i++) {
                            if (clipboardData.items[i].type.indexOf("image") !== -1) {
                                blob = clipboardData.items[i].getAsFile();
                            }
                        }
                   
                        var render = new FileReader();
                       
                        render.onload = function fn(evt) {
                            //输出base64编码
                             var imgArr = [];
                             var that = this;
                             base64 = evt.target.result;
                             document.getElementById('img').setAttribute('src',base64);
                             imgArr = base64.split(',');
                             axios.post('http://localhost:9090/text/text-only',{
                            imgBase64: imgArr[1],
                            imgType: 'png' }).then(function(res){
                                that.resdata = res.data;
                                    that.resdata.forEach((v)=>{
                                    that.str = that.str + v.text
                                })
                                // that.shuju = 1;
                                 console.log(that.str)
                            });
                            
                            //  console.log(imgArr[1]);
                             //  that.Str = base64;
 
                            //  console.log(base64)
                             
                            //  return base64
                            //  console.log(base64)
                            //  return base64;
                            //   return base64
                        }
                         
                        
                        // console.log(b1)
                        render.readAsDataURL(blob);
                         
                    }
            },
            
            // console.log(base64)
         
        )
       
        // return base64
        },
        demo(){
            // var b1 = this.fn1();
            // console.log(b1+'哈哈你好')
            // var that = this;
            // var b1 = this.setPasteImg(base64)
            // console.log(b1)
        //    var b1 =  this.setPasteImg()
        //    console.log(b1)
  
        }
    },
    mounted(){
    this.setPasteImg()
    // this.demo()
  }
}
</script>
 
<style>
 
</style>

效果

能够显示在前端实现字符串呈现双向数据字符串呈现效果

<template>
   <h2>复制或剪切图片后以ctrl + V 粘贴</h2>
   <img id="img" src="" alt="">
   <!-- {{ base64 }} -->
   <button @click="setPasteImg()">测试</button>
   <div>内容是{{ Str }}</div>
</template>
 
<script>
 
// import axios from "axios";
export default {
    data() {
      return {
        // base64:''
        Str:'',
        str : "",
      }
    },
    methods: {
        setPasteImg(base64){
            //粘贴事件
            var that = this;
            // var base64;
            // var base64;
            console.log(base64)
            document.addEventListener('paste', function(event){
                // var b1 = '';
            
                // if (event.clipboardData || event.originalEvent) {
                    var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
                    if(clipboardData.items){
                        var  blob;
                        for (var i = 0; i < clipboardData.items.length; i++) {
                            if (clipboardData.items[i].type.indexOf("image") !== -1) {
                                blob = clipboardData.items[i].getAsFile();
                            }
                        }
                   
                        var render = new FileReader();
                       
                        render.onload = function fn(evt) {
                            //输出base64编码
                             base64 = evt.target.result;
                             document.getElementById('img').setAttribute('src',base64);
                             that.Str = base64;
                            
                            //  console.log(base64)
                             
                            //  return base64
                            //  console.log(base64)
                            //  return base64;
                            //   return base64
                        }
                         
                        
                        // console.log(b1)
                        render.readAsDataURL(blob);
                         
                    }
            },
            
            // console.log(base64)
         
        )
       
        // return base64
        },
        demo(){
            // var b1 = this.fn1();
            // console.log(b1+'哈哈你好')
            // var that = this;
            // var b1 = this.setPasteImg(base64)
            // console.log(b1)
        //    var b1 =  this.setPasteImg()
        //    console.log(b1)
  
        }
    },
    mounted(){
    this.setPasteImg()
    this.demo()
  }
}
</script>
 
<style>
 
</style>

最终成功项目：

<template>
   <h2>复制或剪切图片后以ctrl + V 粘贴</h2>
   <img id="img" src="" alt="">
   <!-- {{ base64 }} -->
   <button @click="setPasteImg()">测试</button>
   <div>内容是{{ Str }}</div>
</template>
 
<script>
 
import axios from "axios";
export default {
    data() {
      return {
        // base64:''
        Str:'',
        str : "",
      }
    },
    methods: {
        setPasteImg(base64){
            //粘贴事件
            var that = this;
            document.addEventListener('paste', function(event){
                    var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
                    if(clipboardData.items){
                        var  blob;
                        for (var i = 0; i < clipboardData.items.length; i++) {
                            if (clipboardData.items[i].type.indexOf("image") !== -1) {
                                blob = clipboardData.items[i].getAsFile();
                            }
                        }
                   
                        var render = new FileReader();
                       
                        render.onload = function fn(evt) {
                            //输出base64编码
                             var imgArr = [];
                             base64 = evt.target.result;
                             document.getElementById('img').setAttribute('src',base64);
                            //  that.Str = base64;
                             imgArr = base64.split(',');
                             axios.post('http://localhost:9090/text/text-only',{
                             imgBase64: imgArr[1],
                             imgType: 'png' }).then(function(res){
                                that.resdata = res.data;
                                    that.resdata.forEach((v)=>{
                                    that.str = that.str + v.text
                                })
                                that.Str = that.str
                            });
                            that.Str = that.str
                        }
                        render.readAsDataURL(blob);
                    }
            },   
        )
        },
 
    },
    mounted(){
    this.setPasteImg()
  }
}
</script>
 
<style>
 
</style>

文本，paddocr的资料，base64转文字的相关源码，效果更好是点击button录了代码库

写好的资料：

能够完成数据的传递的资料，在until的Base64ViewApp这个文件

正确的axios的请求：

这里将字符串的数据进行切割

切割字段的写法

前端页面展示怎样做？这里如何让打印识别的数据出现在前端页面进行展示：

效果

能够显示在前端实现字符串呈现双向数据字符串呈现效果

最终成功项目：

最终实现打印生成字体

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

文本，paddocr的资料，base64转文字的相关源码，效果更好是点击button录了代码库

写好的资料：

能够完成数据的传递的资料，在until的Base64ViewApp这个文件

正确的axios的请求：

这里将字符串的数据进行切割

切割字段的写法

前端页面展示怎样做？这里如何让打印识别的数据出现在前端页面进行展示：

效果

能够显示在前端实现字符串呈现双向数据字符串呈现效果

最终成功项目：

最终实现打印生成字体

热门文章

最新文章

相关电子书