qiubinghui
/
zhywpt-sp
Vērot 1
Pievienot zvaigznīti 0
Atdalīts 0
Kods Problēmas 0 Izmaiņu pieprasījumi 0 Laidieni 0 Vikivietne Aktivitāte
Pārlūkot izejas kodu

Merge branch 'master' of http://192.168.40.220/dmc/jz_applet into master

master
wq pirms 11 mēnešiem
vecāks
8e3ee336a6 e83e3b504e
revīzija
3659052f56
1 mainītis faili ar 130 papildinājumiem un 50 dzēšanām
Dalītais skats Rādīt salīdzināšanas statistiku
  1. 130
    50
      components/viewfinder.vue

+ 130
- 50
components/viewfinder.vue Parādīt failu

@@ -1,17 +1,16 @@
<template>
<view style="width: 100%;height: 100vh;position: fixed;left: 0;top:0;z-index: 111111;">
<view class="viewfinder">
<view ref="targetView" class="container viewfinder">
<view v-if="phoneType == 1"
style="display: flex;align-items: center;justify-content: flex-end;width: 100%;height: 100%;">
<image :src="fileURL + 'image/index/etc_bd_ocr_id_card_locator_front.png'"
style="height: 220rpx;margin-right: 30rpx;" mode="heightFix"></image>
</view>
<view v-if="phoneType == 2" style="margin: 30rpx 0 0 30rpx;">
<image :src="fileURL + 'image/index/etc_bd_ocr_id_card_locator_back.png'" style="height: 160rpx;"
mode="heightFix">
</image>
</view>

style="display: flex;align-items: center;justify-content: flex-end;width: 100%;height: 100%;">
<image :src="fileURL + 'image/index/etc_bd_ocr_id_card_locator_front.png'"
style="height: 220rpx;margin-right: 30rpx;" mode="heightFix"></image>
</view>
<view v-if="phoneType == 2" style="margin: 30rpx 0 0 30rpx;">
<image :src="fileURL + 'image/index/etc_bd_ocr_id_card_locator_back.png'" style="height: 160rpx;"
mode="heightFix">
</image>
</view>
<view v-if="phoneType == 3"
style="margin: -30rpx 0 0 30rpx;display: flex;height: 100%;align-self: flex-end;flex-direction: column;justify-content: flex-end;">
<view style="border: 1px solid #fff;height: 160rpx;width: 160rpx;">
@@ -24,46 +23,45 @@

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

<view style="background-color: #A5A5A5;top: 60%;width: 100%;height: 40%;position: absolute;">
<view style="display: flex;flex-direction: row;justify-content: center;align-items: center;height: 100%;">
<view style="flex: 1;"></view>
<image @click="camera" :src="fileURL + 'image/index/etc_bd_ocr_cancel.png'"
style="width: 50rpx;height: 50rpx;"></image>
<view style="flex: 1;"></view>
<image @click="takePhoto" :src="fileURL + 'image/index/etc_bd_ocr_take_photo_normal.png'"
:style="startPhoto ? 'width: 140rpx;height: 140rpx;' : 'width: 80rpx;height: 80rpx;'"></image>
<view style="flex: 1;"></view>
<image v-if="false" @click="success" :src="fileURL + 'image/index/etc_bd_ocr_confirm.png'"
style="width: 50rpx;height: 50rpx;"></image>
<view style="flex: 1;"></view>
</view>
</view>

<view style="display: flex;flex-direction: row;justify-content: center;align-items: center;height: 100%;">
<view style="flex: 1;"></view>
<image @click="camera" :src="fileURL + 'image/index/etc_bd_ocr_cancel.png'"
style="width: 50rpx;height: 50rpx;"></image>
<view style="flex: 1;"></view>
<image @click="takePhoto" :src="fileURL + 'image/index/etc_bd_ocr_take_photo_normal.png'"
:style="startPhoto ? 'width: 140rpx;height: 140rpx;' : 'width: 80rpx;height: 80rpx;'"></image>
<view style="flex: 1;"></view>
<image v-if="false" @click="success" :src="fileURL + 'image/index/etc_bd_ocr_confirm.png'"
style="width: 50rpx;height: 50rpx;"></image>
<view style="flex: 1;"></view>
</view>
</view>
</view>
</template>

<script setup lang="ts">
import {
fileURL
} from "@/datas/fileURL.js";

import {
ref
ref,
getCurrentInstance,
onMounted,
nextTick
} from 'vue'

import {
fileURL
} from "@/datas/fileURL.js";
let prop = defineProps({
phoneType: {
type: Number,
@@ -100,11 +98,22 @@
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) {
emit('confirmReturn', { tempImagePath: prop.images })
}
})

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

}

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) {
uni.getSystemInfo({
success: (res) => {
console.log(res, '===============', res.windowHeight, res.windowWidth)
// 获取图片信息
uni.getImageInfo({
src: src,
success: (imgS) => {
//((res.windowHeight - res.statusBarHeight) * 0.33)
console.log('====', rect, '输出内容======', imgS.width, imgS.height) //140 1.8(res.windowHeight * 0.23)
// canvas.drawImage(img, 起始 x 坐标, 起始 y 坐标, 宽度, 高度, 绘制到 Canvas 的起始 x 坐标, 绘制到 Canvas 的起始 y 坐标, 裁剪后的宽度, 裁剪后的高度);
context.drawImage(src, imgS.width * 0.1, imgS.height * 0.3, rect.width * 2.2, rect.height * 2.2, 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) {
// res.tempFilePath 是转换后的图片路径
res.tempImagePath = res.tempFilePath
emit('confirmReturn', res)
},
fail(err) {
console.error('canvasToTempFilePath failed', err);
}
}, currentInstance.value)
});
},
fail: (error) => {
console.error('获取图片信息失败', error);
},
});
}
})




//把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。在自定义组件下，第二个参数传入自定义组件实例，以操作组件内 <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() {
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();
}

//重新拍摄
@@ -213,10 +293,10 @@
.viewfinder {
pointer-events: none;
position: absolute;
top: 20%;
left: 10%;
top: 180px;
left: 40px;
width: 80%;
height: 400rpx;
height: 200px;
border: 2px solid #fff;
box-sizing: border-box;
border-radius: 16rpx;

Rakstīt Priekšskatītījums
Notiek ielāde…
Atcelt
Saglabāt