|
|
@@ -23,9 +23,9 @@
|
|
|
</el-row>
|
|
|
<el-row>
|
|
|
<!-- 用于展示图片 -->
|
|
|
- <img id="show-img" class="show-area" />
|
|
|
+ <!-- <img id="show-img" class="show-area" /> -->
|
|
|
<!-- 用于存放真实图片进行文字识别 -->
|
|
|
- <img id="raw-img" style="display: none" />
|
|
|
+ <!-- <img id="raw-img" style="display: none" /> -->
|
|
|
</el-row>
|
|
|
</el-col>
|
|
|
<el-col :span="8" class="place">
|
|
|
@@ -33,15 +33,16 @@
|
|
|
<h2>文字区域检测</h2>
|
|
|
</el-row>
|
|
|
<el-row v-loading="loading" class="small-title">
|
|
|
- <h2 v-if="loading">处理中</h2>
|
|
|
- </el-row>
|
|
|
- <el-row>
|
|
|
- <section v-show="!loading"> 耗时：{{ predictTime }} ms.</section>
|
|
|
+ <!-- <p v-if="loading">处理中</p> -->
|
|
|
</el-row>
|
|
|
<el-row>
|
|
|
<!-- <canvas id="canvas" class="show-area"></canvas> -->
|
|
|
- <img id="predict-img" class="show-area" />
|
|
|
+ <!-- <img id="predict-img" class="show-area" v-show="show_predict" /> -->
|
|
|
+ <img id="show-img" class="show-area" />
|
|
|
</el-row>
|
|
|
+ <!-- <el-row>
|
|
|
+ <section v-show="!loading"> 耗时：{{ predictTime }} ms.</section>
|
|
|
+ </el-row> -->
|
|
|
</el-col>
|
|
|
<el-col :span="8" class="place">
|
|
|
<el-row class="small-title">
|
|
|
@@ -71,6 +72,7 @@ import { onMounted } from "vue";
|
|
|
import { OcrRec } from '../../../../api/api'
|
|
|
|
|
|
let loading = ref(false)
|
|
|
+let show_predict = ref(false)
|
|
|
let predictTime = ref(0)
|
|
|
const fileName = ref(null);
|
|
|
|
|
|
@@ -131,7 +133,7 @@ const uploadImg = () => {
|
|
|
// 用于展示
|
|
|
const showImg = document.getElementById("show-img") as HTMLImageElement;
|
|
|
// 用于识别
|
|
|
- const rawImg = document.getElementById("raw-img") as HTMLImageElement;
|
|
|
+ // const rawImg = document.getElementById("raw-img") as HTMLImageElement;
|
|
|
const inputElement = document
|
|
|
.getElementsByClassName("el-input")[0]
|
|
|
.getElementsByTagName("input")[0];
|
|
|
@@ -140,12 +142,14 @@ const uploadImg = () => {
|
|
|
const file = inputElement.files![0];
|
|
|
reader.onload = () => {
|
|
|
showImg.src = URL.createObjectURL(file);
|
|
|
- rawImg.src = URL.createObjectURL(file);
|
|
|
+ // rawImg.src = URL.createObjectURL(file);
|
|
|
};
|
|
|
reader.readAsDataURL(file);
|
|
|
} catch (err) {
|
|
|
console.error(err);
|
|
|
}
|
|
|
+ if(show_predict.value === true)
|
|
|
+ show_predict.value = !show_predict.value;
|
|
|
};
|
|
|
|
|
|
const predict = async () => {
|
|
|
@@ -157,13 +161,14 @@ const predict = async () => {
|
|
|
alert('请指定语言！')
|
|
|
return;
|
|
|
}
|
|
|
- const img = document.getElementById("raw-img") as HTMLImageElement;
|
|
|
+ const img = document.getElementById("show-img") as HTMLImageElement;
|
|
|
const predictImg = document.getElementById("predict-img") as HTMLImageElement;
|
|
|
const inputElement = document
|
|
|
.getElementsByClassName("el-input")[0]
|
|
|
.getElementsByTagName("input")[0];
|
|
|
const file = inputElement.files![0];
|
|
|
|
|
|
+ // show_predict.value = !show_predict.value;
|
|
|
loading.value = !loading.value
|
|
|
var data = new FormData();
|
|
|
data.append('lang', state1.value);
|
|
|
@@ -171,11 +176,16 @@ const predict = async () => {
|
|
|
data.append('images', file);
|
|
|
|
|
|
OcrRec(data).then(res => {
|
|
|
- console.log(res)
|
|
|
+ // console.log(res)
|
|
|
json_result.value = JSON.stringify(res, null, 4);
|
|
|
// console.log(json_text)
|
|
|
result.value = res.text.reduce((total: any, cur: any) => total + `<p>${cur}</p>`);
|
|
|
+ img.src = "http://192.168.10.11:8000" + res.visualize_img;
|
|
|
+ // console.log(res.visualize_img)
|
|
|
+ predictTime = res.cost_time;
|
|
|
loading.value = !loading.value;
|
|
|
+ if(show_predict.value === false)
|
|
|
+ show_predict.value = !show_predict.value;
|
|
|
}).catch(function (err) {
|
|
|
loading.value = !loading.value;
|
|
|
});
|
