[web_demo] 优化表格识别pdf预览分辨率设置，部分页面优化

src/api/index.ts

@@ -1,7 +1,7 @@
 import axios from "axios";
 
 const server = axios.create({
-  baseURL: "http://192.168.10.72:80",
+  baseURL: "http://192.168.10.33:80",
 });
 
 server.interceptors.request.use(

src/pages/main/views/Detection/LayoutAnalysis.vue

@@ -1,80 +1,13 @@
 <template>
-  <div class="demo-image__placeholder">
-    <div class="block">
-      <el-col :span="20">
-        <el-row class="small-title">
-          <h2>版面分析</h2>
-        </el-row>
-        <el-row style="color: gray; font-size: small;">
-          <p>分析图片或pdf的内容并提取出其中的图片，表格等信息</p>
-        </el-row>
-        <el-row style="color: gray; font-size: small;">
-          <h4>支持jpg, png, bmp, pdf格式</h4>
-        </el-row>
-        <div class="common-layout">
-          <el-container>
-            <el-input type="file" v-model="fileName" @change="uploadImg"></el-input>
-            <el-button type="primary" @click="predict">Predict</el-button>
-          </el-container>
-        </div>
-        <el-row v-show="!is_pdf">
-          <!-- 用于展示图片 -->
-          <img id="show-img" class="show-area" />
-          <!-- 用于存放真实图片 -->
-          <img id="raw-img" style="display: none" />
-        </el-row>
-        <div class="pdf-preview" v-show="is_pdf">
-          <div class="pdf-wrap">
-            <vue-pdf-embed :source="state.source" :style="scale" class="vue-pdf-embed" :page="state.pageNum" />
-          </div>
-          <div class="page-tool">
-            <div class="page-tool-item" @click="prePage">上一页</div>
-            <div class="page-tool-item" @click="nextPage">下一页</div>
-            <div class="page-tool-item">{{ state.pageNum }}/{{ state.numPages }}</div>
-            <div class="page-tool-item" @click="pageZoomOut">放大</div>
-            <div class="page-tool-item" @click="pageZoomIn">缩小</div>
-          </div>
-          <div style="margin-top: 50px;">
-            <el-row class="page-tool">
-              <div class="common-layout">
-                <el-container>
-                  <el-input type="number" v-model="pdf_page"></el-input>
-                  <el-button type="primary" @click="SetPdfPage" plain>页面跳转</el-button>
-                </el-container>
-              </div>
-            </el-row>
-          </div>
-        </div>
-        <canvas id="canvas" style="display: none;"></canvas>
-      </el-col>
-    </div>
-    <div class="block">
-      <el-col :span="20">
-        <el-row class="small-title">
-          <h2 style="margin-right: 100;">检测结果展示</h2>
-          <el-button type="danger" @click="submitBug">提交bug</el-button>
-        </el-row>
-        <el-row style="color: gray; font-size: small;">
-          <p></p>
-        </el-row>
-        <el-row style="color: gray; font-size: small;">
-          <h4></h4>
-        </el-row>
-        <div>
-          <h4></h4>
-          <h4></h4>
-        </div>
-        <el-row v-loading="loading" class="small-title">
-          <h4></h4>
-          <h4></h4>
-        </el-row>
-        <el-row>
-          <img id="predict-img" class="show-area" />
-          <section> 耗时：{{ predictTime }} ms</section>
-        </el-row>
-      </el-col>
-    </div>
-  </div>
+  <el-row :gutter="20">
+    <el-col :span="12" class="place">
+      <el-row class="small-title">
+        <h2>版面分析(暂未实现)</h2>
+      </el-row>
+    </el-col>
+    <el-col :span="12" class="place">
+    </el-col>
+  </el-row>
 </template>
 
 <script lang="ts" setup>
@@ -119,7 +52,7 @@ function getPdfImage(index: number) {
   loadingTask.promise.then((pdf: any) => {
     state.numPages = pdf.numPages;
     pdf.getPage(index).then((page: any) => {
-      const viewport = page.getViewport({ scale: 1 })
+      const viewport = page.getViewport({ scale: 10.0 })
       canvas.value.height = viewport.height;
       canvas.value.width = viewport.width;
       // 画布的dom大小, 设置移动端,宽度设置铺满整个屏幕
@@ -134,9 +67,9 @@ function getPdfImage(index: number) {
         viewport,
       });
       canvas.value.toBlob(function (blob) {
-        pdf_img.value = dataURLtoBlob(canvas.value.toDataURL())
+        pdf_img.value = dataURLtoBlob(canvas.value.toDataURL('images/png', 1.0))
         // console.log(pdf_img.value);
-        console.log(canvas.value.toDataURL(), state.pageNum)
+        // console.log(canvas.value.toDataURL(), state.pageNum)
       });
     })
   });
@@ -239,7 +172,7 @@ const uploadImg = () => {
         is_pdf.value = true
         loadingTask = createLoadingTask(state.source);
         getPdfImage(state.pageNum);
-      } else if (post_ == ".jpg" || post_ == ".png" || post_ == ".bmp"){
+      } else if (post_ == ".jpg" || post_ == ".png" || post_ == ".bmp") {
         showImg.src = URL.createObjectURL(file);
         rawImg.src = URL.createObjectURL(file);
         is_pdf.value = false
@@ -274,37 +207,37 @@ const predict = () => {
     const file: any = convertCanvasToFile(canvas.value, "pdf.png").then(result => {
       console.log(result)
       data.append('images', result);
-      // IMMagicColor(data).then(res => {
-      //   console.log(res.code)
-      //   // bug_id.value = res.response_id;
-      //   predictImg.src = server_ip.value + res.data.out_image
-      //   predictTime.value = res.data.cost
-      //   bugId.value = res.response_id;
-
-
-      //   loading.value = false
-      // }).catch(function (err) {
-      //   loading.value = false
-      //   // bug_id.value = ""
-      //   predictTime.value = 0
-      // });
+      IMMagicColor(data).then(res => {
+        console.log(res.code)
+        // bug_id.value = res.response_id;
+        predictImg.src = server_ip.value + res.data.out_image
+        predictTime.value = res.data.cost
+        bugId.value = res.response_id;
+
+
+        loading.value = false
+      }).catch(function (err) {
+        loading.value = false
+        // bug_id.value = ""
+        predictTime.value = 0
+      });
     })
     // console.log(file)
     // data.append('images', file.File);
   } else {
     data.append('images', file);
 
-    // IMMagicColor(data).then(res => {
-    //   predictImg.src = server_ip.value + res.data.out_image
-    //   predictTime.value = res.data.cost
-    //   bugId.value = res.response_id;
-
-    //   loading.value = !loading.value
-    // }).catch(function (err) {
-    //   loading.value = !loading.value;
-    //   bugId.value = ""
-    //   predictTime.value = 0
-    // });
+    IMMagicColor(data).then(res => {
+      predictImg.src = server_ip.value + res.data.out_image
+      predictTime.value = res.data.cost
+      bugId.value = res.response_id;
+
+      loading.value = !loading.value
+    }).catch(function (err) {
+      loading.value = !loading.value;
+      bugId.value = ""
+      predictTime.value = 0
+    });
   }
 }
 
@@ -365,6 +298,12 @@ let src = ''
   overflow: hidden;
 }
 
+.place {
+  margin-right: auto;
+  margin-left: auto;
+  border-right: solid 1px #ccc;
+}
+
 .show-area {
   width: 100%;
 }

src/pages/main/views/ImageProcess/magicColor.vue

@@ -1,8 +1,7 @@
 <template>
-  <div class="demo-image__placeholder">
-    <div class="block">
-      <el-col :span="20">
-        <el-row class="small-title">
+  <el-row :gutter="20">
+    <el-col :span="12" class="place">
+      <el-row class="small-title">
           <h2>图像锐化增强</h2>
         </el-row>
         <el-row style="color: gray; font-size: small;">
@@ -34,25 +33,13 @@
             <el-input type="number" v-model="pdf_page"></el-input>
             <el-button type="primary" @click="SetPdfPage" plain>页面跳转</el-button>
           </div>
-          <!-- <div style="margin-top: 50px;">
-            <el-row class="page-tool">
-              <div class="common-layout">
-                <el-container>
-                  <el-input type="number" v-model="pdf_page"></el-input>
-                  <el-button type="primary" @click="SetPdfPage" plain>页面跳转</el-button>
-                </el-container>
-              </div>
-            </el-row>
-          </div> -->
         </div>
         <canvas id="canvas" style="display: none;"></canvas>
-      </el-col>
-    </div>
-    <div class="block">
-      <el-col :span="20">
-        <el-row class="small-title">
+    </el-col>
+    <el-col :span="12" class="place">
+      <el-row class="small-title">
           <h2 style="margin-right: 100;">推理结果展示</h2>
-          <el-button type="danger" @click="submitBug">提交bug</el-button>
+          <el-button type="danger" @click="submitBug" disabled>提交bug</el-button>
         </el-row>
         <el-row style="color: gray; font-size: small;">
           <p></p>
@@ -72,9 +59,11 @@
           <img id="predict-img" class="show-area" />
           <section> 耗时：{{ predictTime }} ms</section>
         </el-row>
-      </el-col>
-    </div>
-  </div>
+    </el-col>
+  </el-row>
+
+
+  
 </template>
 
 <script lang="ts" setup>
@@ -364,6 +353,11 @@ let src = ''
   animation: dot 2s infinite steps(3, start);
   overflow: hidden;
 }
+.place {
+  margin-right: auto;
+  margin-left: auto;
+  border-right: solid 1px #ccc;
+}
 
 .show-area {
   width: 100%;

src/pages/main/views/Recognize/ocr.vue

@@ -28,10 +28,6 @@
           <div class="page-tool-item" @click="prePage">上一页</div>
           <div class="page-tool-item" @click="nextPage">下一页</div>
           <div class="page-tool-item">{{ state.pageNum }}/{{ state.numPages }}</div>
-        <!-- <el-input type="number" v-model="pdf_page"></el-input>
-              <el-button type="primary" @click="SetPdfPage" plain>页面跳转</el-button> -->
-        <!-- <div class="page-tool-item" @click="pageZoomOut">放大</div>
-                <div class="page-tool-item" @click="pageZoomIn">缩小</div> -->
         </div>
         <div style="margin-top: 100px;">
           <el-row class="page-tool">
@@ -62,7 +58,7 @@
     <el-col :span="8" class="place">
       <el-row class="small-title">
         <h2 style="margin-right: 0;">识别结果展示</h2>
-        <el-button type="danger" @click="submitBug">提交bug</el-button>
+        <el-button type="danger" @click="submitBug" disabled>提交bug</el-button>
       </el-row>
       <div class="demo-collapse">
         <el-collapse v-model="activeName" accordion>

src/pages/main/views/Recognize/tableRec.vue

@@ -26,7 +26,7 @@
       </el-row>
       <div class="pdf-preview" v-show="is_pdf">
         <div class="pdf-wrap">
-          <vue-pdf-embed :source="state.source" :scale="10.0" class="vue-pdf-embed" :page="state.pageNum" />
+          <vue-pdf-embed :source="state.source" :scale="3.0" class="vue-pdf-embed" :page="state.pageNum" />
         </div>
         <div class="page-tool">
           <div class="page-tool-item" @click="prePage">上一页</div>
@@ -43,7 +43,7 @@
     <el-col :span="12" class="place">
       <el-row class="small-title">
         <h2 style="margin-right: 100;">识别结果展示</h2>
-        <el-button type="danger" @click="submitBug">提交bug</el-button>
+        <el-button type="danger" @click="submitBug" disabled>提交bug</el-button>
       </el-row>
       <el-row v-loading="loading" class="small-title">
         <!-- <p v-if="loading">处理中</p> -->
@@ -59,7 +59,7 @@
           </el-collapse-item>
           <el-collapse-item title="识别结果" name="2">
             <li v-for="(item, index) in htmlArr" :key="index">
-              <el-scrollbar height="600px">
+              <el-scrollbar height="auto">
                 <div style="display: flex;">
                   <span v-html="item"></span>
                 </div>
@@ -104,7 +104,7 @@ const { bug_id } = storeToRefs(bi);
 const state = reactive({
   source: "", //预览pdf文件地址
   pageNum: 1, //当前页面
-  scale: 1, // 缩放比例
+  scale: 3, // 缩放比例
   numPages: 0, // 总页数
 });
 
@@ -150,7 +150,7 @@ const uploadImg = () => {
       const post_ = file.name.substring(file.name.lastIndexOf("."), file.name.length).toLowerCase();
       if (post_ == ".pdf") {
         state.pageNum = 1;
-        state.scale = 1;
+        state.scale = 3;
         state.source = URL.createObjectURL(file);
         is_pdf.value = true
         loadingTask = createLoadingTask(state.source);
@@ -315,7 +315,7 @@ function getPdfImage(index: number) {
   loadingTask.promise.then((pdf: any) => {
     state.numPages = pdf.numPages;
     pdf.getPage(index).then((page: any) => {
-      const viewport = page.getViewport({ scale: 10.0 })
+      const viewport = page.getViewport({ scale: 3.0 })
       canvas.value.height = viewport.height;
       canvas.value.width = viewport.width;
       // 画布的dom大小, 设置移动端,宽度设置铺满整个屏幕
@@ -351,16 +351,6 @@ function nextPage() {
     getPdfImage(state.pageNum);
   }
 }
-function pageZoomOut() {
-  if (state.scale < 2) {
-    state.scale += 0.1;
-  }
-}
-function pageZoomIn() {
-  if (state.scale > 1) {
-    state.scale -= 0.1;
-  }
-}
 
 const { toClipboard } = useClipboard()
 

src/store/ServerIp.ts

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 import { ref } from 'vue'
 
 export const useServerIpStore = defineStore('server_ip', () => {
-  const server_ip = ref("http://192.168.10.72:80")
+  const server_ip = ref("http://192.168.10.33:80")
   
 
   return { server_ip }