Home Explore Help
Register Sign In
Others
/
DocumentAIKit
4
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

[web_demo] 优化pdf切换页面体验，修复pdf ocr识别结果双向点击bug

yanxin 1 year ago
parent
34e1579f6d
commit
ecee6a6c30
7 changed files with 215 additions and 196 deletions
Unified View Show Diff Stats
  1. 73 73
      src/dist/assets/index-ad165c7d.js
  2. 1 1
      src/dist/assets/index-d619e929.css
  3. 2 2
      src/dist/index.html
  4. 54 60
      src/pages/main/views/Detection/LayoutAnalysis.vue
  5. 15 12
      src/pages/main/views/ImageProcess/magicColor.vue
  6. 51 26
      src/pages/main/views/Recognize/ocr.vue
  7. 19 22
      src/pages/main/views/Recognize/tableRec.vue

File diff suppressed because it is too large
+ 73 - 73
src/dist/assets/index-ad165c7d.js


File diff suppressed because it is too large
+ 1 - 1
src/dist/assets/index-d619e929.css


+ 2 - 2
src/dist/index.html
View File 

@@ -4,8 +4,8 @@
 
     <meta charset="UTF-8" />
 
     <meta charset="UTF-8" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <title>DocumentAI Web Demo</title>
 
     <title>DocumentAI Web Demo</title>
 
-    <script type="module" crossorigin src="./assets/index-ad165c7d.js"></script>
 
-    <link rel="stylesheet" href="./assets/index-d619e929.css">
 
+    <script type="module" crossorigin src="./assets/index-1a9d3720.js"></script>
 
+    <link rel="stylesheet" href="./assets/index-87b6234f.css">
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
     <div id="app"></div>
 
     <div id="app"></div>

+ 54 - 60
src/pages/main/views/Detection/LayoutAnalysis.vue
View File 

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

+ 15 - 12
src/pages/main/views/ImageProcess/magicColor.vue
View File 

@@ -8,7 +8,7 @@
 
         <p>V1 主要针对文档图片，去阴影效果较好</p>
 
         <p>V1 主要针对文档图片，去阴影效果较好</p>
 
       </el-row>
 
       </el-row>
 
       <el-row style="color: gray; font-size: small;">
 
       <el-row style="color: gray; font-size: small;">
 
-        <h4>支持jpg, png, bmp等图片格式</h4>
 
+        <h4>支持jpg, png, bmp, pdf等文件格式</h4>
 
       </el-row>
 
       </el-row>
 
       <div class="common-layout">
 
       <div class="common-layout">
 
         <el-container>
 
         <el-container>
 
@@ -127,6 +127,9 @@ function getPdfImage(index: number) {
 
         pdf_img.value = dataURLtoBlob(canvas.value.toDataURL('images/png', 1.0))
 
         pdf_img.value = dataURLtoBlob(canvas.value.toDataURL('images/png', 1.0))
 
         const showImg = document.getElementById("show-img") as HTMLImageElement;
 
         const showImg = document.getElementById("show-img") as HTMLImageElement;
 
         showImg.src = canvas.value.toDataURL('images/png', 1.0);
 
         showImg.src = canvas.value.toDataURL('images/png', 1.0);
 
+        showImg.onload = () => {
 
+          console.log(canvas.value.toDataURL('images/png', 1.0))
 
+        }
 
       });
 
       });
 
     })
 
     })
 
   });
 
   });
 
@@ -213,14 +216,14 @@ const uploadImg = () => {
 
         is_pdf.value = true
 
         is_pdf.value = true
 
         loadingTask = createLoadingTask(state.source);
 
         loadingTask = createLoadingTask(state.source);
 
         getPdfImage(state.pageNum);
 
         getPdfImage(state.pageNum);
 
-      } else 
-      if (post_ == ".jpg" || post_ == ".png" || post_ == ".bmp" || post_ == ".jpeg") {
 
-        showImg.src = URL.createObjectURL(file);
 
-        is_pdf.value = false
 
-      } else {
 
-        alert('不支持的文件格式！')
 
-        fileName.value = null
 
-      }
 
+      } else
 
+        if (post_ == ".jpg" || post_ == ".png" || post_ == ".bmp" || post_ == ".jpeg") {
 
+          showImg.src = URL.createObjectURL(file);
 
+          is_pdf.value = false
 
+        } else {
 
+          alert('不支持的文件格式！')
 
+          fileName.value = null
 
+        }
 
     };
 
     };
 
     reader.readAsDataURL(file);
 
     reader.readAsDataURL(file);
 
   } catch (err) {
 
   } catch (err) {
 
@@ -245,15 +248,15 @@ const predict = () => {
 
 
 
   if (is_pdf.value) {
 
   if (is_pdf.value) {
 
     const file: any = convertCanvasToFile(canvas.value, "pdf.png").then(result => {
 
     const file: any = convertCanvasToFile(canvas.value, "pdf.png").then(result => {
 
-      console.log(result)
 
       data.append('image', result);
 
       data.append('image', result);
 
       IMMagicColor(api, data).then(res => {
 
       IMMagicColor(api, data).then(res => {
 
         res_image.value.src = res.data.image
 
         res_image.value.src = res.data.image
 
         predictTime.value = res.data.cost
 
         predictTime.value = res.data.cost
 
         bugId.value = res.response_id;
 
         bugId.value = res.response_id;
 
-        loading.value = false
 
+        loading.value = !loading.value
 
       }).catch(function (err) {
 
       }).catch(function (err) {
 
-        loading.value = false
 
+        loading.value = !loading.value;
 
+        bugId.value = ""
 
         predictTime.value = 0
 
         predictTime.value = 0
 
       });
 
       });
 
     })
 
     })

+ 51 - 26
src/pages/main/views/Recognize/ocr.vue
View File 

@@ -9,7 +9,7 @@
 
         <p>支持识别图片/通过领先的深度学习技术，对各种表格，图片，文档、证件、面单等多种通用场景进行快速、精准的检测和识别，支持简体中文/繁体中文/英文/西欧主流语言等多种种语言，同时支持印刷体、手写体、倾斜、折叠、旋转等。</p>
 
         <p>支持识别图片/通过领先的深度学习技术，对各种表格，图片，文档、证件、面单等多种通用场景进行快速、精准的检测和识别，支持简体中文/繁体中文/英文/西欧主流语言等多种种语言，同时支持印刷体、手写体、倾斜、折叠、旋转等。</p>
 
       </el-row>
 
       </el-row>
 
       <el-row style="color: gray; font-size: small;">
 
       <el-row style="color: gray; font-size: small;">
 
-        <h4>支持jpg, png, bmp等图片格式</h4>
 
+        <h4>支持jpg, png, bmp, pdf等文件格式</h4>
 
       </el-row>
 
       </el-row>
 
       <el-row>
 
       <el-row>
 
         <div class="common-layout">
 
         <div class="common-layout">
 
@@ -46,6 +46,7 @@
 
         <div>
 
         <div>
 
           <img id="show-img" class="show-area" />
 
           <img id="show-img" class="show-area" />
 
           <canvas id="canvas"></canvas>
 
           <canvas id="canvas"></canvas>
 
+          <canvas id="img_canvas" style="display: none;"></canvas>
 
         </div>
 
         </div>
 
       </el-row>
 
       </el-row>
 
     </el-col>
 
     </el-col>
 
@@ -134,23 +135,33 @@ function getPdfImage(index: number) {
 
     state.numPages = pdf.numPages;
 
     state.numPages = pdf.numPages;
 
     pdf.getPage(index).then((page: any) => {
 
     pdf.getPage(index).then((page: any) => {
 
       const viewport = page.getViewport({ scale: 4.0 })
 
       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.height = viewport.height;
 
       canvas.value.width = viewport.width;
 
       canvas.value.width = viewport.width;
 
       const destWidth = 398;
 
       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.width = destWidth + 'px';
 
 
 
       canvas.value.style.height = destWidth * (viewport.height / viewport.width) + '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({
 
       page.render({
 
         canvasContext: ctx,
 
         canvasContext: ctx,
 
         viewport,
 
         viewport,
 
       });
 
       });
 
-      canvas.value.toBlob(function (blob) {
 
-        pdf_img.value = dataURLtoBlob(canvas.value.toDataURL('images/png', 1.0))
 
+      img_canvas.value.toBlob(function (blob) {
 
+        pdf_img.value = dataURLtoBlob(img_canvas.value.toDataURL('images/png', 1.0))
 
         const showImg = document.getElementById("show-img") as HTMLImageElement;
 
         const showImg = document.getElementById("show-img") as HTMLImageElement;
 
-        showImg.src = canvas.value.toDataURL('images/png', 1.0);
 
-        fa_canvas = new fabric.Canvas(canvas.value);
 
-        rects.splice(0)
 
+        showImg.src = img_canvas.value.toDataURL('images/png', 1.0);
 
+        showImg.onload = () => {
 
+          canvas.value.width = showImg.width;
 
+          canvas.value.height = showImg.height;
 
+          fa_canvas = new fabric.Canvas(canvas.value);
 
+          rects.splice(0)
 
+          selectedItem.value = -1;
 
+        }
 
       });
 
       });
 
     })
 
     })
 
   });
 
   });
 
@@ -160,6 +171,10 @@ function SetPdfPage() {
 
   if (pdf_page.value >= 1 && pdf_page.value <= state.numPages) {
 
   if (pdf_page.value >= 1 && pdf_page.value <= state.numPages) {
 
     console.log(pdf_page.value)
 
     console.log(pdf_page.value)
 
     state.pageNum = Number(pdf_page.value);
 
     state.pageNum = Number(pdf_page.value);
 
+    if (fa_canvas && typeof fa_canvas.dispose === 'function') {
 
+      fa_canvas.dispose();
 
+      fa_canvas = null;
 
+    }
 
     getPdfImage(state.pageNum);
 
     getPdfImage(state.pageNum);
 
   } else {
 
   } else {
 
     console.log(pdf_page.value)
 
     console.log(pdf_page.value)
 
@@ -170,6 +185,10 @@ function SetPdfPage() {
 
 function prePage() {
 
 function prePage() {
 
   if (state.pageNum > 1) {
 
   if (state.pageNum > 1) {
 
     state.pageNum -= 1;
 
     state.pageNum -= 1;
 
+    if (fa_canvas && typeof fa_canvas.dispose === 'function') {
 
+      fa_canvas.dispose();
 
+      fa_canvas = null;
 
+    }
 
     getPdfImage(state.pageNum);
 
     getPdfImage(state.pageNum);
 
   }
 
   }
 
 }
 
 }
 
@@ -177,6 +196,10 @@ function prePage() {
 
 function nextPage() {
 
 function nextPage() {
 
   if (state.pageNum < state.numPages) {
 
   if (state.pageNum < state.numPages) {
 
     state.pageNum += 1;
 
     state.pageNum += 1;
 
+    if (fa_canvas && typeof fa_canvas.dispose === 'function') {
 
+      fa_canvas.dispose();
 
+      fa_canvas = null;
 
+    }
 
     getPdfImage(state.pageNum);
 
     getPdfImage(state.pageNum);
 
   }
 
   }
 
 }
 
 }
 
@@ -213,6 +236,7 @@ let show_predict = ref(false)
 
 let predictTime = ref(0)
 
 let predictTime = ref(0)
 
 const fileName = ref(null);
 
 const fileName = ref(null);
 
 const canvas = ref(null as unknown as HTMLCanvasElement);
 
 const canvas = ref(null as unknown as HTMLCanvasElement);
 
+const img_canvas = ref(null as unknown as HTMLCanvasElement);
 
 
 
 let selectedItem = ref(-1)
 
 let selectedItem = ref(-1)
 
 
 
@@ -238,6 +262,7 @@ let rects: any = []
 
 
 
 onMounted(async () => {
 
 onMounted(async () => {
 
   canvas.value = document.getElementById("canvas") as HTMLCanvasElement;
 
   canvas.value = document.getElementById("canvas") as HTMLCanvasElement;
 
+  img_canvas.value = document.getElementById("img_canvas") as HTMLCanvasElement;
 
 });
 
 });
 
 
 
 const uploadImg = () => {
 
 const uploadImg = () => {
 
@@ -255,7 +280,10 @@ const uploadImg = () => {
 
     const file = inputElement.files![0];
 
     const file = inputElement.files![0];
 
     reader.onload = () => {
 
     reader.onload = () => {
 
       const post_ = file.name.substring(file.name.lastIndexOf("."), file.name.length).toLowerCase();
 
       const post_ = file.name.substring(file.name.lastIndexOf("."), file.name.length).toLowerCase();
 
-      fa_canvas ? fa_canvas.clear() : 0;
 
+      if (fa_canvas && typeof fa_canvas.dispose === 'function') {
 
+        fa_canvas.dispose();
 
+        fa_canvas = null;
 
+      }
 
       if (post_ == ".pdf") {
 
       if (post_ == ".pdf") {
 
         state.pageNum = 1;
 
         state.pageNum = 1;
 
         // state.scale = 4;
 
         // state.scale = 4;
 
@@ -263,21 +291,21 @@ const uploadImg = () => {
 
         is_pdf.value = true
 
         is_pdf.value = true
 
         loadingTask = createLoadingTask(state.source);
 
         loadingTask = createLoadingTask(state.source);
 
         getPdfImage(state.pageNum);
 
         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);
 
-          rects.splice(0)
 
-          selectedItem.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);
 
+            rects.splice(0)
 
+            selectedItem.value = -1;
 
+          }
 
+          is_pdf.value = false
 
+        } else {
 
+          alert('不支持的文件格式！')
 
+          fileName.value = null
 
         }
 
         }
 
-        is_pdf.value = false
 
-      } else {
 
-        alert('不支持的文件格式！')
 
-        fileName.value = null
 
-      }
 
     };
 
     };
 
     reader.readAsDataURL(file);
 
     reader.readAsDataURL(file);
 
   } catch (err) {
 
   } catch (err) {
 
@@ -328,7 +356,6 @@ const predict = async () => {
 
     alert('请先指定语言！')
 
     alert('请先指定语言！')
 
     return;
 
     return;
 
   }
 
   }
 
-  fa_canvas.clear()
 
   rects.splice(0)
 
   rects.splice(0)
 
 
 
   const img = document.getElementById("show-img") as HTMLImageElement;
 
   const img = document.getElementById("show-img") as HTMLImageElement;
 
@@ -342,7 +369,7 @@ const predict = async () => {
 
   data.append('lang', ocr_lang.value);
 
   data.append('lang', ocr_lang.value);
 
 
 
   if (is_pdf.value) {
 
   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);
 
       data.append('image', result);
 
       OcrRec(api, data).then(res => {
 
       OcrRec(api, data).then(res => {
 
         console.log(res.code)
 
         console.log(res.code)
 
@@ -358,7 +385,6 @@ const predict = async () => {
 
           }
 
           }
 
         }
 
         }
 
         let tmp_boxes = res.data.boxes;
 
         let tmp_boxes = res.data.boxes;
 
-        // fa_canvas = new fabric.Canvas(canvas.value);
 
         const h_radio = img.height / img.naturalHeight;
 
         const h_radio = img.height / img.naturalHeight;
 
         const w_radio = img.width / img.naturalWidth;
 
         const w_radio = img.width / img.naturalWidth;
 
         for (let i = 0; i < tmp_boxes.length; i++) {
 
         for (let i = 0; i < tmp_boxes.length; i++) {
 
@@ -398,7 +424,6 @@ const predict = async () => {
 
         }
 
         }
 
       }
 
       }
 
       let tmp_boxes = res.data.boxes;
 
       let tmp_boxes = res.data.boxes;
 
-      // fa_canvas = new fabric.Canvas(canvas.value);
 
       const h_radio = img.height / img.naturalHeight;
 
       const h_radio = img.height / img.naturalHeight;
 
       const w_radio = img.width / img.naturalWidth;
 
       const w_radio = img.width / img.naturalWidth;
 
       for (let i = 0; i < tmp_boxes.length; i++) {
 
       for (let i = 0; i < tmp_boxes.length; i++) {

+ 19 - 22
src/pages/main/views/Recognize/tableRec.vue
View File 

@@ -9,7 +9,7 @@
 
         <p>支持识别图片/PDF格式文档中的表格内容，包括有线表格、无线表格、合并单元格表格，同时支持单张图片内的多个表格内容识别，返回各表格的表头表尾内容、单元格文字内容及其行列位置信息。</p>
 
         <p>支持识别图片/PDF格式文档中的表格内容，包括有线表格、无线表格、合并单元格表格，同时支持单张图片内的多个表格内容识别，返回各表格的表头表尾内容、单元格文字内容及其行列位置信息。</p>
 
       </el-row>
 
       </el-row>
 
       <el-row style="color: gray; font-size: small;">
 
       <el-row style="color: gray; font-size: small;">
 
-        <h4>支持jpg, png, bmp等图片格式</h4>
 
+        <h4>支持jpg, png, bmp, pdf等文件格式</h4>
 
       </el-row>
 
       </el-row>
 
       <div class="common-layout">
 
       <div class="common-layout">
 
         <el-container>
 
         <el-container>
 
@@ -157,15 +157,15 @@ const uploadImg = () => {
 
         is_pdf.value = true
 
         is_pdf.value = true
 
         loadingTask = createLoadingTask(state.source);
 
         loadingTask = createLoadingTask(state.source);
 
         getPdfImage(state.pageNum);
 
         getPdfImage(state.pageNum);
 
-      } else 
-      if (post_ == ".jpg" || post_ == ".png" || post_ == ".bmp" || post_ == ".jpeg") {
 
-        showImg.src = URL.createObjectURL(file);
 
-        rawImg.src = URL.createObjectURL(file);
 
-        is_pdf.value = false
 
-      } else {
 
-        alert('不支持的文件格式！')
 
-        fileName.value = null
 
-      }
 
+      } else
 
+        if (post_ == ".jpg" || post_ == ".png" || post_ == ".bmp" || post_ == ".jpeg") {
 
+          showImg.src = URL.createObjectURL(file);
 
+          rawImg.src = URL.createObjectURL(file);
 
+          is_pdf.value = false
 
+        } else {
 
+          alert('不支持的文件格式！')
 
+          fileName.value = null
 
+        }
 
     };
 
     };
 
     reader.readAsDataURL(file);
 
     reader.readAsDataURL(file);
 
   } catch (err) {
 
   } catch (err) {
 
@@ -198,22 +198,19 @@ const predict = async () => {
 
       // console.log(result)
 
       // console.log(result)
 
       data.append('image', result);
 
       data.append('image', result);
 
       TableRec(api, data).then(res => {
 
       TableRec(api, data).then(res => {
 
-        console.log(res.code)
 
+        console.log(api)
 
         bug_id.value = res.response_id;
 
         bug_id.value = res.response_id;
 
         predictTime.value = res.data.cost;
 
         predictTime.value = res.data.cost;
 
         jsonArr.value.splice(0);
 
         jsonArr.value.splice(0);
 
         let tmp_json = res.data.json_items;
 
         let tmp_json = res.data.json_items;
 
-        if (tmp_json.length == 0) {
 
-          alert('未检测到结果！');
 
-        } else {
 
-          for (let i = 0; i < tmp_json.length; i++) {
 
-            jsonArr.value.push(JSON.stringify(tmp_json[i], null, 4));
 
-          }
 
-          htmlArr.value.splice(0);
 
-          let tmp_html = res.data.html_items;
 
-          for (let i = 0; i < tmp_html.length; i++) {
 
-            htmlArr.value.push(tmp_html[i]);
 
-          }
 
+        for (let i = 0; i < tmp_json.length; i++) {
 
+          jsonArr.value.push(JSON.stringify(tmp_json[i], null, 4));
 
+        }
 
+
 
+        htmlArr.value.splice(0);
 
+        let tmp_html = res.data.html_items;
 
+        for (let i = 0; i < tmp_html.length; i++) {
 
+          htmlArr.value.push(tmp_html[i]);
 
         }
 
         }
 
         loading.value = false
 
         loading.value = false
 
       }).catch(function (err) {
 
       }).catch(function (err) {