|
@@ -1,8 +1,10 @@
|
|
<template>
|
|
<template>
|
|
<view class="cameraBg">
|
|
<view class="cameraBg">
|
|
|
|
+ <!-- position: absolute;left: 100000px; 隐藏canvas画布 -->
|
|
<canvas style="width: 100%; height: 100vh;position: absolute;left: 100000px;" canvas-id="canvas" id="canvas"></canvas>
|
|
<canvas style="width: 100%; height: 100vh;position: absolute;left: 100000px;" canvas-id="canvas" id="canvas"></canvas>
|
|
|
|
+ <!-- 相机组件 -->
|
|
<camera device-position="back" flash="auto" style="width: 100%; height: 100vh">
|
|
<camera device-position="back" flash="auto" style="width: 100%; height: 100vh">
|
|
- <cover-image src="@/static/scan-frame/cameraBg.png" class="scan-img"> </cover-image>
|
|
|
|
|
|
+ <cover-image src="@/static/scan-frame/cameraBg.png" class="cover-img"> </cover-image>
|
|
<cover-view class="scanBtn" v-if="scanShow">
|
|
<cover-view class="scanBtn" v-if="scanShow">
|
|
<cover-view class="beat" @click="scan">
|
|
<cover-view class="beat" @click="scan">
|
|
<cover-image class="beatImg" src="@/static/scan-frame/album.png"></cover-image>
|
|
<cover-image class="beatImg" src="@/static/scan-frame/album.png"></cover-image>
|
|
@@ -26,15 +28,14 @@
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- scanShow: true,
|
|
|
|
- sysinfo: null,
|
|
|
|
- imageInfo: null
|
|
|
|
|
|
+ scanShow: true, // 显示操作按钮
|
|
|
|
+ sysinfo: null, // 设备信息
|
|
|
|
+ imageInfo: null // 拍照图片信息
|
|
}
|
|
}
|
|
},
|
|
},
|
|
onReady() {
|
|
onReady() {
|
|
const sysinfo = uni.getSystemInfoSync()
|
|
const sysinfo = uni.getSystemInfoSync()
|
|
this.sysinfo = sysinfo
|
|
this.sysinfo = sysinfo
|
|
- console.log(sysinfo)
|
|
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
// 手动输入
|
|
// 手动输入
|
|
@@ -59,16 +60,19 @@ export default {
|
|
cutImg(fileUrl){
|
|
cutImg(fileUrl){
|
|
const vm = this
|
|
const vm = this
|
|
const ctx = uni.createCanvasContext('canvas')
|
|
const ctx = uni.createCanvasContext('canvas')
|
|
|
|
+ // 将拍照的图片绘制到canvas,宽高等于窗口宽高和手机窗口保持一致
|
|
ctx.drawImage(fileUrl,0,0,this.sysinfo.windowWidth,this.sysinfo.windowHeight)
|
|
ctx.drawImage(fileUrl,0,0,this.sysinfo.windowWidth,this.sysinfo.windowHeight)
|
|
ctx.draw(true,()=>{
|
|
ctx.draw(true,()=>{
|
|
- const cutW = 650
|
|
|
|
- const cutH = 160
|
|
|
|
- const cutT = 400
|
|
|
|
- const cutL = 50
|
|
|
|
- const canvasW=cutW/750*this.sysinfo.windowWidth;
|
|
|
|
- const canvasH=cutH/1624*this.sysinfo.windowHeight;
|
|
|
|
- const canvasL =cutL/750*this.sysinfo.windowWidth;
|
|
|
|
- const canvasT= cutT/1624*this.sysinfo.windowHeight;
|
|
|
|
|
|
+ const cutW = 650 // 裁剪框宽度
|
|
|
|
+ const cutH = 160 // 裁剪框高度
|
|
|
|
+ const cutT = 400 // 裁剪框距离顶部距离
|
|
|
|
+ const cutL = 50 // 裁剪框距离左侧距离
|
|
|
|
+ // 以上裁剪框宽高及坐标是相对于实际蒙板图片的位置
|
|
|
|
+ const canvasW=cutW/750*this.sysinfo.windowWidth; // canvas 画布实际宽度
|
|
|
|
+ const canvasH=cutH/1624*this.sysinfo.windowHeight; // canvas 画布实际高度
|
|
|
|
+ const canvasL =cutL/750*this.sysinfo.windowWidth; // canvas 画布开始坐标x
|
|
|
|
+ const canvasT= cutT/1624*this.sysinfo.windowHeight; // canvas 画布开始坐标y
|
|
|
|
+ // 开始裁剪
|
|
uni.canvasToTempFilePath({
|
|
uni.canvasToTempFilePath({
|
|
x: canvasL,
|
|
x: canvasL,
|
|
y: canvasT,
|
|
y: canvasT,
|
|
@@ -77,7 +81,7 @@ export default {
|
|
canvasId: 'canvas',
|
|
canvasId: 'canvas',
|
|
success: function(res) {
|
|
success: function(res) {
|
|
// 在H5平台下,tempFilePath 为 base64
|
|
// 在H5平台下,tempFilePath 为 base64
|
|
- vm.camera64(res.tempFilePath)
|
|
|
|
|
|
+ vm.parseImgs(res.tempFilePath)
|
|
}
|
|
}
|
|
})
|
|
})
|
|
})
|
|
})
|
|
@@ -103,21 +107,21 @@ export default {
|
|
// 裁剪图片
|
|
// 裁剪图片
|
|
vm.cutImg(imageRes.tempFilePath)
|
|
vm.cutImg(imageRes.tempFilePath)
|
|
}else{
|
|
}else{
|
|
- vm.camera64(imageRes.tempFilePath)
|
|
|
|
|
|
+ // 相册选择的图片直接解析,这里如果需要裁剪可以跳转到裁剪图片页面在继续下一步
|
|
|
|
+ vm.parseImgs(imageRes.tempFilePath)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|
|
})
|
|
})
|
|
},
|
|
},
|
|
- // 拿到图片开始进行识别
|
|
|
|
- camera64(filePath) {
|
|
|
|
- console.log(filePath)
|
|
|
|
|
|
+ // 拿到图片转base64后在开始进行识别
|
|
|
|
+ parseImgs(filePath) {
|
|
|
|
+ // 图片转base64格式
|
|
uni.getFileSystemManager().readFile({
|
|
uni.getFileSystemManager().readFile({
|
|
filePath: filePath,
|
|
filePath: filePath,
|
|
encoding: 'base64',
|
|
encoding: 'base64',
|
|
success: (base) => {
|
|
success: (base) => {
|
|
- // 返回base64格式
|
|
|
|
const base64Str = 'data:image/' + this.imageInfo.type + ';base64,' + base.data
|
|
const base64Str = 'data:image/' + this.imageInfo.type + ';base64,' + base.data
|
|
// 拿到base64,不需要base64 就把上层的转换去掉
|
|
// 拿到base64,不需要base64 就把上层的转换去掉
|
|
this.scanShow = true
|
|
this.scanShow = true
|
|
@@ -126,8 +130,8 @@ export default {
|
|
title: '已识别到图片,看console',
|
|
title: '已识别到图片,看console',
|
|
duration: 2000
|
|
duration: 2000
|
|
});
|
|
});
|
|
- console.log(base64Str,'base64Str图片')
|
|
|
|
// 此处为后端接口 传base64图片 进行ocr识别
|
|
// 此处为后端接口 传base64图片 进行ocr识别
|
|
|
|
+ // http.request()
|
|
uni.redirectTo({
|
|
uni.redirectTo({
|
|
url: "/pages/vinInput/confirmVin?verifyCode=123456ads11234567&filePath="+base64Str
|
|
url: "/pages/vinInput/confirmVin?verifyCode=123456ads11234567&filePath="+base64Str
|
|
})
|
|
})
|
|
@@ -137,8 +141,9 @@ export default {
|
|
}
|
|
}
|
|
})
|
|
})
|
|
},
|
|
},
|
|
- // 拍照
|
|
|
|
|
|
+ // 点击开始拍照
|
|
takePhoto() {
|
|
takePhoto() {
|
|
|
|
+ // 获取相机上下文对象
|
|
const ctx = uni.createCameraContext()
|
|
const ctx = uni.createCameraContext()
|
|
ctx.takePhoto({
|
|
ctx.takePhoto({
|
|
quality: 'high',
|
|
quality: 'high',
|
|
@@ -159,7 +164,7 @@ export default {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100vh;
|
|
height: 100vh;
|
|
position: fixed;
|
|
position: fixed;
|
|
- .scan-img {
|
|
|
|
|
|
+ .cover-img {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100vh;
|
|
height: 100vh;
|
|
z-index: 1;
|
|
z-index: 1;
|