写好的资料：
能够完成数据的传递的资料，在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>
最终实现打印生成字体
