|
|
@@ -8,7 +8,7 @@
|
|
|
<p>目前支持检测图片与表格</p>
|
|
|
</el-row>
|
|
|
<el-row style="color: gray; font-size: small;">
|
|
|
- <h4>支持jpg, png, bmp等图片格式</h4>
|
|
|
+ <h4>支持jpg, png, bmp, pdf等文件格式</h4>
|
|
|
</el-row>
|
|
|
<div class="common-layout">
|
|
|
<el-container>
|
|
|
@@ -38,6 +38,7 @@
|
|
|
<img id="show-img" class="show-area" />
|
|
|
</el-row>
|
|
|
<canvas id="canvas"></canvas>
|
|
|
+ <canvas id="img_canvas" style="display: none;"></canvas>
|
|
|
</el-col>
|
|
|
<el-col :span="12" class="place">
|
|
|
<el-row class="small-title">
|
|
|
@@ -74,9 +75,8 @@
|
|
|
<script lang="ts" setup>
|
|
|
import { Detection, SubmitBug } from '../../../../api/api'
|
|
|
import { fabric } from 'fabric';
|
|
|
-import { reactive, ref, toRefs, computed } from 'vue'
|
|
|
+import { reactive, ref } from 'vue'
|
|
|
import { onMounted } from "vue";
|
|
|
-import VuePdfEmbed from "vue-pdf-embed";
|
|
|
import { createLoadingTask } from "vue3-pdfjs/esm"; // 获得总页数
|
|
|
import {
|
|
|
ArrowLeft,
|
|
|
@@ -118,29 +118,41 @@ function dataURLtoBlob(dataURL: any) {
|
|
|
}
|
|
|
|
|
|
function getPdfImage(index: number) {
|
|
|
- // console.log(index, state.pageNum)
|
|
|
+ console.log(index, state.pageNum)
|
|
|
+ const showImg = document.getElementById("show-img") as HTMLImageElement;
|
|
|
loadingTask.promise.then((pdf: any) => {
|
|
|
state.numPages = pdf.numPages;
|
|
|
pdf.getPage(index).then((page: any) => {
|
|
|
const viewport = page.getViewport({ scale: 4.0 })
|
|
|
+ img_canvas.value.height = viewport.height;
|
|
|
+ img_canvas.value.width = viewport.width;
|
|
|
canvas.value.height = viewport.height;
|
|
|
canvas.value.width = viewport.width;
|
|
|
const destWidth = 398;
|
|
|
+ img_canvas.value.style.width = destWidth + 'px';
|
|
|
+
|
|
|
+ img_canvas.value.style.height = destWidth * (viewport.height / viewport.width) + 'px';
|
|
|
canvas.value.style.width = destWidth + 'px';
|
|
|
|
|
|
canvas.value.style.height = destWidth * (viewport.height / viewport.width) + 'px';
|
|
|
- const ctx = canvas.value.getContext('2d');
|
|
|
+ const ctx = img_canvas.value.getContext('2d');
|
|
|
page.render({
|
|
|
canvasContext: ctx,
|
|
|
viewport,
|
|
|
});
|
|
|
- canvas.value.toBlob(function (blob) {
|
|
|
- pdf_img.value = dataURLtoBlob(canvas.value.toDataURL('images/png', 1.0))
|
|
|
- const showImg = document.getElementById("show-img") as HTMLImageElement;
|
|
|
- showImg.src = canvas.value.toDataURL('images/png', 1.0);
|
|
|
- fa_canvas = new fabric.Canvas(canvas.value);
|
|
|
- figure_rects.splice(0)
|
|
|
- table_rects.splice(0)
|
|
|
+ img_canvas.value.toBlob(function (blob) {
|
|
|
+ let data = img_canvas.value.toDataURL('images/png', 1.0)
|
|
|
+ pdf_img.value = dataURLtoBlob(data)
|
|
|
+ showImg.src = data;
|
|
|
+ showImg.onload = () => {
|
|
|
+ canvas.value.width = showImg.width;
|
|
|
+ canvas.value.height = showImg.height;
|
|
|
+ fa_canvas = new fabric.Canvas(canvas.value);
|
|
|
+ figure_rects.splice(0)
|
|
|
+ table_rects.splice(0)
|
|
|
+ figureSelectedItem.value = -1;
|
|
|
+ tableSelectedItem.value = -1;
|
|
|
+ }
|
|
|
});
|
|
|
})
|
|
|
});
|
|
|
@@ -200,6 +212,7 @@ let show_predict = ref(false)
|
|
|
let predictTime = ref(0)
|
|
|
const fileName = ref(null);
|
|
|
const canvas = ref(null as unknown as HTMLCanvasElement);
|
|
|
+const img_canvas = ref(null as unknown as HTMLCanvasElement);
|
|
|
let figureSelectedItem = ref(-1)
|
|
|
let tableSelectedItem = ref(-1)
|
|
|
|
|
|
@@ -222,6 +235,7 @@ let table_rects: any = []
|
|
|
|
|
|
onMounted(async () => {
|
|
|
canvas.value = document.getElementById("canvas") as HTMLCanvasElement;
|
|
|
+ img_canvas.value = document.getElementById("img_canvas") as HTMLCanvasElement;
|
|
|
});
|
|
|
|
|
|
const uploadImg = () => {
|
|
|
@@ -246,23 +260,23 @@ const uploadImg = () => {
|
|
|
is_pdf.value = true
|
|
|
loadingTask = createLoadingTask(state.source);
|
|
|
getPdfImage(state.pageNum);
|
|
|
- } else
|
|
|
- if (post_ == ".jpg" || post_ == ".png" || post_ == ".bmp" || post_ == ".jpeg") {
|
|
|
- showImg.src = URL.createObjectURL(file);
|
|
|
- showImg.onload = () => {
|
|
|
- canvas.value.width = showImg.width;
|
|
|
- canvas.value.height = showImg.height;
|
|
|
- fa_canvas = new fabric.Canvas(canvas.value);
|
|
|
- figure_rects.splice(0)
|
|
|
- table_rects.splice(0)
|
|
|
- figureSelectedItem.value = -1;
|
|
|
- tableSelectedItem.value = -1;
|
|
|
+ } else
|
|
|
+ if (post_ == ".jpg" || post_ == ".png" || post_ == ".bmp" || post_ == ".jpeg") {
|
|
|
+ showImg.src = URL.createObjectURL(file);
|
|
|
+ showImg.onload = () => {
|
|
|
+ canvas.value.width = showImg.width;
|
|
|
+ canvas.value.height = showImg.height;
|
|
|
+ fa_canvas = new fabric.Canvas(canvas.value);
|
|
|
+ figure_rects.splice(0)
|
|
|
+ table_rects.splice(0)
|
|
|
+ figureSelectedItem.value = -1;
|
|
|
+ tableSelectedItem.value = -1;
|
|
|
+ }
|
|
|
+ is_pdf.value = false
|
|
|
+ } else {
|
|
|
+ alert('不支持的文件格式！')
|
|
|
+ fileName.value = null
|
|
|
}
|
|
|
- is_pdf.value = false
|
|
|
- } else {
|
|
|
- alert('不支持的文件格式！')
|
|
|
- fileName.value = null
|
|
|
- }
|
|
|
};
|
|
|
reader.readAsDataURL(file);
|
|
|
} catch (err) {
|
|
|
@@ -288,27 +302,6 @@ function CreateRect(canvas: any, i: number, left: number, top: number, width: nu
|
|
|
name: highlight ? 'high' : 'normal',
|
|
|
}) as RectWithId;
|
|
|
rect.set('id', i);
|
|
|
- // rect.on('mouseup', function () {
|
|
|
- // if (label == 1) {
|
|
|
- // figureSelectedItem.value = i;
|
|
|
- // } else if (label == 2) {
|
|
|
- // tableSelectedItem.value = i;
|
|
|
- // }
|
|
|
-
|
|
|
- // let objects = fa_canvas.getObjects();
|
|
|
- // for (let i = 0; i < objects.length; i++) {
|
|
|
- // if (objects[i].name === 'high') {
|
|
|
- // // 找到名为 rectName 的矩形元素，执行删除操作等
|
|
|
- // fa_canvas.remove(objects[i]);
|
|
|
- // break;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // if (label == 1) {
|
|
|
- // CreateRect(fa_canvas, i, figure_rects[i].left, figure_rects[i].top, figure_rects[i].width, figure_rects[i].height, true, label);
|
|
|
- // } else if (label == 2) {
|
|
|
- // CreateRect(fa_canvas, i, table_rects[i].left, table_rects[i].top, table_rects[i].width, table_rects[i].height, true, label);
|
|
|
- // }
|
|
|
- // });
|
|
|
canvas.add(rect);
|
|
|
}
|
|
|
|
|
|
@@ -332,7 +325,7 @@ const predict = async () => {
|
|
|
var data = new FormData();
|
|
|
|
|
|
if (is_pdf.value) {
|
|
|
- const file: any = convertCanvasToFile(canvas.value, "pdf.png").then(result => {
|
|
|
+ const file: any = convertCanvasToFile(img_canvas.value, "pdf.png").then(result => {
|
|
|
data.append('image', result);
|
|
|
Detection(api, data).then(res => {
|
|
|
console.log(res.code)
|
|
|
@@ -355,19 +348,24 @@ const predict = async () => {
|
|
|
let height = h_radio * (tmp_boxes[i][3] - tmp_boxes[i][1]);
|
|
|
const rect: iRect = { left, top, width, height };
|
|
|
if (tmp_labels[i] == "Figure") {
|
|
|
- figureArr.value.push("图片" + String(figureArr.value.length + 1));
|
|
|
+ figureArr.value.push("图片");
|
|
|
figure_rects.push(rect);
|
|
|
CreateRect(fa_canvas, i, left, top, width, height, false, 1);
|
|
|
} else if (tmp_labels[i] == "Table_0" || tmp_labels[i] == "Table_std") {
|
|
|
- tableArr.value.push("表格" + String(tableArr.value.length + 1));
|
|
|
+ tableArr.value.push("表格(" + tmp_labels[i] + ")");
|
|
|
table_rects.push(rect);
|
|
|
CreateRect(fa_canvas, i, left, top, width, height, false, 2);
|
|
|
}
|
|
|
}
|
|
|
- // if (figureArr.value.length == 0)
|
|
|
- // figureArr.value.push("无");
|
|
|
- // if (tableArr.value.length == 0)
|
|
|
- // tableArr.value.push("无");
|
|
|
+ figureArr.value.reverse();
|
|
|
+ tableArr.value.reverse();
|
|
|
+ table_rects.reverse();
|
|
|
+ for (let i = 0; i < figureArr.value.length; i++) {
|
|
|
+ figureArr.value[i] = figureArr.value[i] + " -- " + String(i + 1);
|
|
|
+ }
|
|
|
+ for (let i = 0; i < tableArr.value.length; i++) {
|
|
|
+ tableArr.value[i] = tableArr.value[i] + " -- " + String(i + 1);
|
|
|
+ }
|
|
|
}
|
|
|
predictTime.value = res.data.cost;
|
|
|
loading.value = !loading.value;
|
|
|
@@ -423,10 +421,6 @@ const predict = async () => {
|
|
|
for (let i = 0; i < tableArr.value.length; i++) {
|
|
|
tableArr.value[i] = tableArr.value[i] + " -- " + String(i + 1);
|
|
|
}
|
|
|
- // if (figureArr.value.length == 0)
|
|
|
- // figureArr.value.push("无");
|
|
|
- // if (tableArr.value.length == 0)
|
|
|
- // tableArr.value.push("无");
|
|
|
}
|
|
|
predictTime.value = res.data.cost;
|
|
|
loading.value = !loading.value;
|
