257 lines
7.5 KiB
Vue
257 lines
7.5 KiB
Vue
<!-- 图片文字识别 -->
|
|
<template>
|
|
<div class="evaluate3">
|
|
<div class="bottom-main">
|
|
<div class="top">
|
|
<div>
|
|
<div class="title">图片识别</div>
|
|
<div class="box">
|
|
<a-image :width="510" :height="340" :src="responseUrl" />
|
|
<a-upload
|
|
v-model:file-list="fileList"
|
|
name="file"
|
|
:action="uploadUrl"
|
|
:headers="headers"
|
|
:showUploadList="false"
|
|
@change="handleChange"
|
|
maxCount="100"
|
|
>
|
|
<a-button>
|
|
<upload-outlined></upload-outlined>
|
|
上传图片
|
|
</a-button>
|
|
</a-upload>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="title">识别结果</div>
|
|
<div class="box">
|
|
<div class="bg bg1"></div>
|
|
<div class="bg bg2"></div>
|
|
<div class="bg bg3"></div>
|
|
<div class="bg bg4"></div>
|
|
<div class="top-left">
|
|
<a-menu v-model:selectedKeys="menuOpenKeys2" mode="horizontal">
|
|
<a-menu-item key="全文还原">
|
|
<template #icon>
|
|
<mail-outlined />
|
|
</template>
|
|
全文还原
|
|
</a-menu-item>
|
|
<a-menu-item key="识别结果">
|
|
<template #icon>
|
|
<mail-outlined />
|
|
</template>
|
|
识别结果
|
|
</a-menu-item>
|
|
<a-menu-item key="json返回">
|
|
<template #icon>
|
|
<mail-outlined />
|
|
</template>
|
|
json返回
|
|
</a-menu-item>
|
|
</a-menu>
|
|
|
|
<div v-if="menuOpenKeys2[0] === '识别结果'" class="scene">
|
|
<div>{{ imageResult }}</div>
|
|
</div>
|
|
<div v-if="menuOpenKeys2[0] === '全文还原'" class="scene">
|
|
<div>{{ imageResult0 }}</div>
|
|
</div>
|
|
<div v-if="menuOpenKeys2[0] === 'json返回'" class="scene">
|
|
<div>{{ imageResult1 }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="bottom">
|
|
<a-button @click="checkImage()">检测</a-button>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { paddleocr,algo } from '@/api/file'
|
|
import { message } from 'ant-design-vue'
|
|
import { useRouter } from 'vue-router'
|
|
const router = useRouter()
|
|
const uploadUrl = window.SITE_CONFIG.apiURL + '/upload'
|
|
let fileList = ref([])
|
|
// const responseUrl = ref('')
|
|
const imageResult = ref('')
|
|
const imageResult0 = ref('')
|
|
const imageResult1 = ref('')
|
|
const menuOpenKeys2 = ref(['全文还原'])
|
|
// 图片初始化
|
|
let responseUrl = ref('static/image/' + router.currentRoute.value.query.exampleImg)
|
|
const imgType = router.currentRoute.value.query.exampleImg.split('.')[1]
|
|
const handleChange = (info) => {
|
|
debugger;
|
|
if (info.file.status !== 'uploading') {
|
|
console.log(info.file, info.fileList)
|
|
}
|
|
if (info.file.status === 'done') {
|
|
message.success(`${info.file.name} file uploaded successfully`)
|
|
debugger
|
|
responseUrl.value = info.file.response.data
|
|
// imgType.value = info.file.response.data.split('.')[1]
|
|
if (responseUrl.value) {
|
|
checkImage()
|
|
}
|
|
} else if (info.file.status === 'error') {
|
|
message.error(`${info.file.name} file upload failed.`)
|
|
}
|
|
}
|
|
const checkImage = () => {
|
|
getUrlBase64(responseUrl.value, imgType.value, (base64) => {
|
|
console.log('1111111', base64)
|
|
const param = {
|
|
company: router.currentRoute.value.query.company,
|
|
algorithmName: router.currentRoute.value.query.algorithmName,
|
|
data: base64.split('base64,')[1],
|
|
type: router.currentRoute.value.query.type
|
|
}
|
|
algo(param).then((res) => {
|
|
// wordValue.value = res.data
|
|
console.log('1111', res.data)
|
|
imageResult.value = res.data.data.text_data
|
|
imageResult0.value = res.data.data.text_data
|
|
imageResult1.value = res.data.data.text_data
|
|
})
|
|
})
|
|
}
|
|
const getUrlBase64 = (url, ext, callback) => {
|
|
var canvas = document.createElement('canvas') //创建canvas DOM元素
|
|
var ctx = canvas.getContext('2d')
|
|
var img = new Image()
|
|
img.crossOrigin = 'Anonymous'
|
|
img.src = url
|
|
img.onload = function () {
|
|
canvas.height = img.height //指定画板的高度,自定义
|
|
canvas.width = img.width //指定画板的宽度，自定义
|
|
ctx.drawImage(img, 0, 0, img.width, img.height) //参数可自定义
|
|
var dataURL = canvas.toDataURL('image/' + ext)
|
|
callback.call(this, dataURL) //回掉函数获取Base64编码
|
|
canvas = null
|
|
}
|
|
}
|
|
onMounted(() => {
|
|
checkImage()
|
|
})
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.evaluate3 {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
// background: rgba(0, 88, 225, 0.06);
|
|
padding: 20px;
|
|
:deep(.ant-menu-horizontal) {
|
|
display: flex;
|
|
justify-content: unset;
|
|
}
|
|
.bottom-main {
|
|
display: block;
|
|
.top {
|
|
display: flex;
|
|
height: 85%;
|
|
background: unset;
|
|
& > div:nth-of-type(1) {
|
|
width: 510px;
|
|
.ant-btn {
|
|
width: 120px;
|
|
height: 44px;
|
|
font-size: 18px;
|
|
color: #fff;
|
|
background: #0b138b;
|
|
border: none;
|
|
border-radius: 6px;
|
|
position: absolute;
|
|
top: 270px;
|
|
left: 350px;
|
|
}
|
|
}
|
|
& > div:nth-of-type(2) {
|
|
margin-left: 45px;
|
|
flex: 1;
|
|
}
|
|
& > div > .title {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
margin-bottom: 20px;
|
|
}
|
|
& > div > .box {
|
|
height: 340px;
|
|
background: #fafafa;
|
|
border-radius: 6px;
|
|
position: relative;
|
|
.bg {
|
|
width: 58px;
|
|
height: 54px;
|
|
background: pink;
|
|
position: absolute;
|
|
}
|
|
.bg1 {
|
|
background: url('~@/assets/detailsAll/sf_bg1.png') no-repeat;
|
|
background-size: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.bg2 {
|
|
background: url('~@/assets/detailsAll/sf_bg2.png') no-repeat;
|
|
background-size: 100%;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
.bg3 {
|
|
background: url('~@/assets/detailsAll/sf_bg3.png') no-repeat;
|
|
background-size: 100%;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
.bg4 {
|
|
background: url('~@/assets/detailsAll/sf_bg4.png') no-repeat;
|
|
background-size: 100%;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
:deep(.ant-image-img) {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
.top-left {
|
|
margin-left: 20px;
|
|
width: 700px;
|
|
padding-top: 20px;
|
|
.scene {
|
|
margin-top: 20px;
|
|
margin-left: 20px;
|
|
font-size: 18px;
|
|
div {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.bottom {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
background: unset;
|
|
padding: 0;
|
|
.ant-btn {
|
|
margin-left: 20px;
|
|
width: 100px;
|
|
height: 40px;
|
|
font-size: 18px;
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|