qiubinghui
/
zhywpt-sp
Слідкувати 1
В обрані 0
Форк 0
Код Проблеми 0 Запити на злиття 0 Релізи 0 Вікі Активність
Переглянути джерело

提交

yxb
DESKTOP-2IO5MST\huting 1 рік тому
джерело
1d08b6c9c6
коміт
55da82dcd6
2 змінених файлів з 75 додано та 177 видалено
Розділений перегляд Показати статистику Diff
  1. 22
    122
      components/viewfinder.vue
  2. 53
    55
      subpackage/orders/car-release.vue

+ 22
- 122
components/viewfinder.vue Переглянути файл

@@ -1,6 +1,6 @@
<template>
<view style="width: 100%;height: 100vh;position: fixed;left: 0;top:0;z-index: 111111;">
<view ref="targetView" class="container viewfinder">
<view class="viewfinder">
<view v-if="phoneType == 1"
style="display: flex;align-items: center;justify-content: flex-end;width: 100%;height: 100%;">
<image src="/static/image/etc_bd_ocr_id_card_locator_front.png"
@@ -22,20 +22,17 @@

</view>
</view>
<canvas canvas-id="canvasbg" id="canvasbg" style="width: 100%;height: 100%;"></canvas>
</view>
<!-- camera -->
<camera v-if="showStartPhoto" id="camera" style="height: 70vh;width: 100vh;background-color: black;width: 100%;"
mode="normal" :device-position="cameraPosition" :flash="flash" @stop="cameraStop" @error="cameraError" />

<view v-if="!startPhoto" style="height: 70vh;background-color: black;">
<!-- <image style="position: absolute;top: 20%;left: 10%;touch-action: none;" :src="srcImg"
<view v-if="!showStartPhoto" style="height: 70vh;background-color: black;">
<image style="position: absolute;top: 20%;left: 10%;touch-action: none;" :src="srcImg"
@touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd"
:style="{ transform: `translate(${offsetX}px, ${offsetY}px) rotate(${rotateDegree}deg) scale(${scale})`, transition: 'transform ' + transitionDuration + 's' }">
</image> -->
<canvas canvas-id="canvasId" id="canvasId" style="height: 98vh;width: 100vh;" @touchstart="handleTouchStart"
@touchmove="handleTouchMove" @touchend="handleTouchEnd"
:style="{ transform: `translate(${offsetX}px, ${offsetY}px) rotate(${rotateDegree}deg) scale(${scale})`, transition: 'transform ' + transitionDuration + 's' }"></canvas>
</image>
</view>

<view style="background-color: #A5A5A5;top: 60%;width: 100%;height: 40%;position: absolute;">
@@ -58,9 +55,7 @@

<script setup lang="ts">
import {
ref,
getCurrentInstance,
onMounted
ref
} from 'vue'

let prop = defineProps({
@@ -99,39 +94,11 @@
let touchMoveDistance = ref(0)
let scale = ref(1)
let transitionDuration = ref(0)
let startPhoto = ref(prop.showStartPhoto)
const startX = ref(0);
const startY = ref(0);
const offsetX = ref(0);
const offsetY = ref(0);
const dragging = ref(false);
const canvasId = 'canvasId';
const targetView = ref();
const currentInstance = ref();

onMounted(() => {
currentInstance.value = getCurrentInstance()
if (!prop.showStartPhoto) {
const context = uni.createCanvasContext(canvasId, currentInstance.value)
const query = uni.createSelectorQuery().in(currentInstance.value)
// query.in(this)
query.select('.container').boundingClientRect((rect : any) => {
if (rect) {
uni.getImageInfo({
src: srcImg.value,
success: (imgs) => {
// canvas.drawImage(img, 起始 x 坐标, 起始 y 坐标, 宽度, 高度, 绘制到 Canvas 的起始 x 坐标, 绘制到 Canvas 的起始 y 坐标, 裁剪后的宽度, 裁剪后的高度);
context.drawImage(srcImg.value, rect.left, rect.top, imgs.width, imgs.height, rect.left, rect.top, rect.width, rect.height);
context.draw();
},
fail: (error) => {
console.error('获取图片信息失败', error);
},
});
}
}).exec();
}
})

const handleTouchStart = (event : TouchEvent) => {
console.log('手柄触摸启动', '==1')
@@ -186,18 +153,19 @@
cameraContext = uni.createCameraContext();
// #endif
// #ifdef MP-ALIPAY
cameraContext = uni.createCameraContext('camera');
cameraContext = my.createCameraContext('camera');
// #endif
// 调用拍照方法
cameraContext.takePhoto({
quality: 'normal',
success: (res : any) => {
success: (res) => {
// 在这里处理拍照成功后的逻辑，res.tempImagePath 为拍照的图片路径
// srcImg.value = res.tempImagePath
startPhoto.value = false
cameraContext.stopRecord();
getViewPosition(res.tempImagePath)
console.log('拍照成功:', res.tempImagePath);
srcImg.value = res.tempImagePath
// showStartPhoto.value = false
cameraContext.stopRecord();
emit('confirmReturn', res)
console.log("1111")
},
fail: (error) => {
console.error('拍照失败:', error);
@@ -211,88 +179,14 @@

}

const getViewPosition = (src : any) => {
const context = uni.createCanvasContext(canvasId, currentInstance.value)
const query = uni.createSelectorQuery().in(currentInstance.value)
// query.in(this)
query.select('.container').boundingClientRect((rect : any) => {
if (rect) {
// showStartPhoto.value = false
// canvas.drawImage(img, 起始 x 坐标, 起始 y 坐标, 宽度, 高度, 绘制到 Canvas 的起始 x 坐标, 绘制到 Canvas 的起始 y 坐标, 裁剪后的宽度, 裁剪后的高度);
context.drawImage(src, rect.left, rect.top, rect.width, rect.height, rect.left, rect.top, rect.width, rect.height);
context.draw(false, () => {
uni.canvasToTempFilePath({
canvasId: canvasId,
x: rect.left,
y: rect.top,
width: rect.width,
height: rect.height,
destWidth: rect.width,
destHeight: rect.height,
success(res : any) {
console.log('成功', res)
// res.tempFilePath 是转换后的图片路径
console.log(res.tempFilePath);
// srcImg.value = res.tempImagePath
// showStartPhoto.value = false
res.tempImagePath = res.tempFilePath
emit('confirmReturn', res)
},
fail(err) {
console.error('canvasToTempFilePath failed', err);
}
}, currentInstance.value)
});
//把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。在自定义组件下，第二个参数传入自定义组件实例，以操作组件内 <canvas> 组件。
console.log('视图的位置信息：', rect);
console.log('视图的 x 坐标：', rect.left);
console.log('视图的 y 坐标：', rect.top);
console.log('视图的宽度：', rect.width);
console.log('视图的高度：', rect.height);
}
}).exec();
};

//成功
function success() {
boundingClientRect((rect : any) => {
uni.canvasToTempFilePath({
canvasId: 'canvasId',
x: rect.left,
y: rect.top,
width: rect.width,
height: rect.height,
destWidth: rect.width,
destHeight: rect.height,
success(res : any) {
console.log('==========', res.tempFilePath);
emit('confirmReturn', {
tempImagePath: res.tempFilePath
})
},
fail(err) {
console.error('canvasToTempFilePath failed', err);
}
}, currentInstance.value)
console.log('图片地址', srcImg.value);
emit('confirmReturn', {
tempImagePath: srcImg.value
})
}

//获取节点信息
function boundingClientRect(fun : any) {
const query = uni.createSelectorQuery().in(currentInstance.value)
query.select('.container').boundingClientRect((rect : any) => {
if (rect) {
//把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。在自定义组件下，第二个参数传入自定义组件实例，以操作组件内 <canvas> 组件。
console.log('视图的位置信息：', rect);
console.log('视图的 x 坐标：', rect.left);
console.log('视图的 y 坐标：', rect.top);
console.log('视图的宽度：', rect.width);
console.log('视图的高度：', rect.height);
fun(rect)
}
}).exec();
}

//重新拍摄
function camera() {
emit('camera')
@@ -323,6 +217,12 @@
z-index: 2;
}

/*
.container {
position: relative;
height: 100vh;
} */

/* .content {
position: absolute;
top: 50%;

+ 53
- 55
subpackage/orders/car-release.vue Переглянути файл

@@ -565,61 +565,59 @@
state.changeColor = true;
state.phoneType = 0
state.isTakePhotoModeShow = false
console.log("图片地址val", val.tempImagePath)
state.form.vehPosImgUrl = val.tempImagePath
// uploadFile(val.tempImagePath, imageType, etcCarOcrCard).then((data) => {
// // uploadFile(val.tempImagePath, state.choiceIndex, ocrAllQuery).then((data) => {
// console.log('输出内容=====================', state.choiceIndex)
// if (state.choiceIndex === "3") {
// if (data.plate_a.length > 8) {
// state.form.vehicleIdNum = data.plate_a.substring(0, 8);
// } else {
// state.form.vehicleIdNum = data.plate_a;
// }
// state.form.man = data.man;
// state.form.vehicleType = data.vehicle;
// state.form.character = data.character;
// state.form.vin = data.vin;
// state.form.engineNum = data.engine;
// state.form.register = data.register;
// state.form.issueDate = data.issue;
// state.form.vehPosImgUrl = data.imageUrl;
// state.form.vehicleModel = data.model;

// } else {
// state.form.approvedCount = data.apc;
// state.form.approvedCountShow = data.apc;
// state.form.maintenaceMass = data.unladen;
// state.form.maintenaceMassShow = data.unladen;
// // 91接口差
// // // #ifdef MP-WEIXIN
// // state.form.vehicleDimensions = data.overall.replaceAll("×", "X");
// // // #endif
// // // #ifdef MP-ALIPAY
// // state.form.vehicleDimensions = data.overall.replace(/×/g, "X");
// // // #endif

// // let arr = data.overall.split("×");
// // #ifdef MP-WEIXIN
// state.form.vehicleDimensions = data.overall.replaceAll("x", "X");
// // #endif
// // #ifdef MP-ALIPAY
// state.form.vehicleDimensions = data.overall.replace(/x/g, "X");
// // #endif

// let arr = data.overall.split("x");
// state.outlineL = arr[0]; //外廓 长
// state.outlineW = arr[1]; //外廓 宽
// state.outlineH = arr[2].substring(0, arr[2].length - 2); //外廓 高
// state.form.totalMass = data.gross;
// state.form.totalMassShow = data.gross;
// state.form.vehNegImgUrl = data.imageUrl;
// state.form.permittedWeight = data.alc ? data.alc : 0;
// state.form.permittedTowWeight = data.towing ? data.towing : 0;
// console.log('=====================', state.form.vehNegImgUrl, state)
// }
// state.isTakePhotoModeShow = false
// })
uploadFile(val.tempImagePath, imageType, etcCarOcrCard).then((data) => {
// uploadFile(val.tempImagePath, state.choiceIndex, ocrAllQuery).then((data) => {
console.log('输出内容=====================', state.choiceIndex)
if (state.choiceIndex === "3") {
if (data.plate_a.length > 8) {
state.form.vehicleIdNum = data.plate_a.substring(0, 8);
} else {
state.form.vehicleIdNum = data.plate_a;
}
state.form.man = data.man;
state.form.vehicleType = data.vehicle;
state.form.character = data.character;
state.form.vin = data.vin;
state.form.engineNum = data.engine;
state.form.register = data.register;
state.form.issueDate = data.issue;
state.form.vehPosImgUrl = data.imageUrl;
state.form.vehicleModel = data.model;

} else {
state.form.approvedCount = data.apc;
state.form.approvedCountShow = data.apc;
state.form.maintenaceMass = data.unladen;
state.form.maintenaceMassShow = data.unladen;
// 91接口差
// // #ifdef MP-WEIXIN
// state.form.vehicleDimensions = data.overall.replaceAll("×", "X");
// // #endif
// // #ifdef MP-ALIPAY
// state.form.vehicleDimensions = data.overall.replace(/×/g, "X");
// // #endif

// let arr = data.overall.split("×");
// #ifdef MP-WEIXIN
state.form.vehicleDimensions = data.overall.replaceAll("x", "X");
// #endif
// #ifdef MP-ALIPAY
state.form.vehicleDimensions = data.overall.replace(/x/g, "X");
// #endif

let arr = data.overall.split("x");
state.outlineL = arr[0]; //外廓 长
state.outlineW = arr[1]; //外廓 宽
state.outlineH = arr[2].substring(0, arr[2].length - 2); //外廓 高
state.form.totalMass = data.gross;
state.form.totalMassShow = data.gross;
state.form.vehNegImgUrl = data.imageUrl;
state.form.permittedWeight = data.alc ? data.alc : 0;
state.form.permittedTowWeight = data.towing ? data.towing : 0;
console.log('=====================', state.form.vehNegImgUrl, state)
}
state.isTakePhotoModeShow = false
})
console.log("图片地址val", val.tempImagePath)
}
const takePhotoMode = (index) => {

Писати Попередній перегляд
Завантаження…
Відмінити
Зберегти