|
|
@@ -18,24 +18,27 @@
|
|
|
<el-button type="primary" @click="predict" :loading="loading">Predict</el-button>
|
|
|
</el-container>
|
|
|
</div>
|
|
|
- <el-row v-show="!is_pdf">
|
|
|
+ <div v-show="is_pdf">
|
|
|
+ <el-row>
|
|
|
+ <el-button-group>
|
|
|
+ <el-button type="primary" :icon="ArrowLeft" @click="prePage">上一页</el-button>
|
|
|
+ <el-button type="primary" @click="nextPage">
|
|
|
+ 下一页<el-icon class="el-icon--right">
|
|
|
+ <ArrowRight />
|
|
|
+ </el-icon>
|
|
|
+ </el-button>
|
|
|
+ </el-button-group>
|
|
|
+ <div class="page-tool-item">{{ state.pageNum }}/{{ state.numPages }}</div>
|
|
|
+ <el-container>
|
|
|
+ <el-input type="number" v-model="pdf_page"></el-input>
|
|
|
+ <el-button type="primary" @click="SetPdfPage" plain>页面跳转</el-button>
|
|
|
+ </el-container>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <el-row>
|
|
|
<!-- 用于展示图片 -->
|
|
|
<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" :scale="3.0" 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>
|
|
|
- <el-input type="number" v-model="pdf_page"></el-input>
|
|
|
- <el-button type="primary" @click="SetPdfPage" plain>页面跳转</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
<canvas id="canvas" style="display: none;"></canvas>
|
|
|
</el-col>
|
|
|
<el-col :span="16" class="place">
|
|
|
@@ -71,17 +74,18 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang='ts' setup>
|
|
|
-import { reactive, ref, toRefs, computed } from 'vue'
|
|
|
+import { reactive, ref } from 'vue'
|
|
|
import { onMounted } from "vue";
|
|
|
import { TableRec, SubmitBug } from '../../../../api/api'
|
|
|
-import VuePdfEmbed from "vue-pdf-embed";
|
|
|
import { createLoadingTask } from "vue3-pdfjs/esm"; // 获得总页数
|
|
|
import { storeToRefs } from 'pinia'
|
|
|
import OcrLangList from '../../../../components/OcrLangList.vue'
|
|
|
import { useOcrLangStore } from '../../../../store/OcrLang';
|
|
|
import { useBugIdStore } from '../../../../store/BugID';
|
|
|
-import useClipboard from 'vue-clipboard3';
|
|
|
-
|
|
|
+import {
|
|
|
+ ArrowLeft,
|
|
|
+ ArrowRight,
|
|
|
+} from '@element-plus/icons-vue'
|
|
|
import { useServerIpStore } from '../../../../store/ServerIp';
|
|
|
import { useServerPortStore } from '../../../../store/ServerPort';
|
|
|
|
|
|
@@ -146,14 +150,14 @@ const uploadImg = () => {
|
|
|
const file = inputElement.files![0];
|
|
|
reader.onload = () => {
|
|
|
const post_ = file.name.substring(file.name.lastIndexOf("."), file.name.length).toLowerCase();
|
|
|
- // if (post_ == ".pdf") {
|
|
|
- // state.pageNum = 1;
|
|
|
- // // state.scale = 4;
|
|
|
- // state.source = URL.createObjectURL(file);
|
|
|
- // is_pdf.value = true
|
|
|
- // loadingTask = createLoadingTask(state.source);
|
|
|
- // getPdfImage(state.pageNum);
|
|
|
- // } else
|
|
|
+ if (post_ == ".pdf") {
|
|
|
+ state.pageNum = 1;
|
|
|
+ // state.scale = 4;
|
|
|
+ state.source = URL.createObjectURL(file);
|
|
|
+ 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);
|
|
|
rawImg.src = URL.createObjectURL(file);
|
|
|
@@ -326,8 +330,8 @@ function getPdfImage(index: number) {
|
|
|
});
|
|
|
canvas.value.toBlob(function (blob) {
|
|
|
pdf_img.value = dataURLtoBlob(canvas.value.toDataURL('images/png', 1.0))
|
|
|
- // console.log(pdf_img.value);
|
|
|
- console.log(canvas.value.toDataURL(), state.pageNum)
|
|
|
+ const showImg = document.getElementById("show-img") as HTMLImageElement;
|
|
|
+ showImg.src = canvas.value.toDataURL('images/png', 1.0);
|
|
|
});
|
|
|
})
|
|
|
});
|
|
|
@@ -365,58 +369,6 @@ function nextPage() {
|
|
|
border-right: solid 1px #ccc;
|
|
|
}
|
|
|
|
|
|
-.pdf-preview {
|
|
|
- position: relative;
|
|
|
- height: 100vh;
|
|
|
- padding: 20px 0;
|
|
|
- box-sizing: border-box;
|
|
|
- background: rgb(66, 66, 66);
|
|
|
-}
|
|
|
-
|
|
|
-.vue-pdf-embed {
|
|
|
- text-align: center;
|
|
|
- width: auto;
|
|
|
- border: 1px solid #e5e5e5;
|
|
|
- margin: 0 auto;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-
|
|
|
-.pdf-preview {
|
|
|
- position: relative;
|
|
|
- height: 100vh;
|
|
|
- padding: 20px 0;
|
|
|
- box-sizing: border-box;
|
|
|
- background-color: e9e9e9;
|
|
|
-}
|
|
|
-
|
|
|
-.pdf-wrap {
|
|
|
- overflow-y: auto;
|
|
|
-}
|
|
|
-
|
|
|
-.vue-pdf-embed {
|
|
|
- text-align: center;
|
|
|
- width: 515px;
|
|
|
- border: 1px solid #e5e5e5;
|
|
|
- margin: 0 auto;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-
|
|
|
-.page-tool {
|
|
|
- position: absolute;
|
|
|
- /* bottom: 35px; */
|
|
|
- /* padding-left: 15px; */
|
|
|
- /* padding-right: 15px; */
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- background: rgb(66, 66, 66);
|
|
|
- color: white;
|
|
|
- border-radius: 19px;
|
|
|
- z-index: 100;
|
|
|
- cursor: pointer;
|
|
|
- margin-left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
-}
|
|
|
-
|
|
|
.page-tool-item {
|
|
|
padding: 8px 15px;
|
|
|
padding-left: 10px;
|
