278 lines
7.9 KiB
Vue
278 lines
7.9 KiB
Vue
|
<template>
|
|||
|
|
<view class="box">
|
|||
|
|
<canvas v-if="showCanvas" id="canvas" canvas-id="canvas" style="width: 100vw;background-color: green;" :style="`height:${canvasHeight}px`" @touchstart="startDraw" @touchmove="drawing" @@touchend="endDraw"></canvas>
|
|||
|
|
|
|||
|
|
<cover-view class="tipTxt">请在空白处横屏签名</cover-view>
|
|||
|
|
|
|||
|
|
<view class="btn">
|
|||
|
|
<uv-button size="large" style="width: 50%;" @tap="clearSign">重 签</uv-button>
|
|||
|
|
<uv-button type="primary" size="large" class="mainBtn" style="width: 50%;" @tap="confirm">完 成</uv-button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { onReady, onUnload } from '@dcloudio/uni-app';
|
|||
|
|
import { ref, nextTick } from 'vue';
|
|||
|
|
import { pathToBase64, base64ToPath } from './index.js'
|
|||
|
|
import { uploadImg } from "@/api/upload"
|
|||
|
|
|
|||
|
|
const btnHeight = ref(null)
|
|||
|
|
const BoxHeight = ref(null)
|
|||
|
|
const canvasWidth = ref(null)
|
|||
|
|
const canvasHeight = ref(null)
|
|||
|
|
const showCanvas = ref(false)
|
|||
|
|
|
|||
|
|
const signFlag = ref(false)
|
|||
|
|
|
|||
|
|
const getBtnHeight = () => {
|
|||
|
|
const query = uni.createSelectorQuery().in(this);
|
|||
|
|
// 选择要查询的元素，使用元素ID或类名
|
|||
|
|
query.select('.btn').boundingClientRect(data => {
|
|||
|
|
btnHeight.value = data.height
|
|||
|
|
}).select('.box').boundingClientRect(res => {
|
|||
|
|
// console.log('元素高度:', res);
|
|||
|
|
// BoxHeight.value = res.height
|
|||
|
|
// canvasWidth.value = res.width
|
|||
|
|
}).exec(() => {
|
|||
|
|
// 确保两个查询都完成后再初始化画布
|
|||
|
|
if (btnHeight.value && BoxHeight.value && canvasWidth.value) {
|
|||
|
|
console.log("获取",BoxHeight.value,btnHeight.value);
|
|||
|
|
|
|||
|
|
canvasHeight.value = BoxHeight.value - btnHeight.value
|
|||
|
|
showCanvas.value = true
|
|||
|
|
// 等待DOM更新完成后再初始化Canvas
|
|||
|
|
nextTick(() => {
|
|||
|
|
initCanvas();
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
console.error('获取元素尺寸失败，无法初始化画布');
|
|||
|
|
}
|
|||
|
|
}); // 执行查询
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let canvasContext = null
|
|||
|
|
const initCanvas = () => {
|
|||
|
|
console.log(canvasWidth.value, canvasHeight.value)
|
|||
|
|
canvasContext = uni.createCanvasContext('canvas');
|
|||
|
|
canvasContext.setFillStyle('#F5F5F5'); // 设置填充颜色为红色
|
|||
|
|
canvasContext.fillRect(0, 0, canvasWidth.value, canvasHeight.value); // 填充整个画板
|
|||
|
|
canvasContext.draw(true)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const startX = ref(null)
|
|||
|
|
const startY = ref(null)
|
|||
|
|
const startDraw = (e) => {
|
|||
|
|
startX.value = e.touches[0].x
|
|||
|
|
startY.value = e.touches[0].y
|
|||
|
|
canvasContext.beginPath(); // 开始创建一个路径
|
|||
|
|
signFlag.value = true
|
|||
|
|
}
|
|||
|
|
const endDraw = (e) => {
|
|||
|
|
startX.value = 0
|
|||
|
|
startY.value = 0
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const drawing = (e) => {
|
|||
|
|
let temX = e.touches[0].x;
|
|||
|
|
let temY = e.touches[0].y;
|
|||
|
|
canvasContext.moveTo(startX.value, startY.value)
|
|||
|
|
canvasContext.lineTo(temX, temY)
|
|||
|
|
canvasContext.setStrokeStyle('#000') // 文字颜色
|
|||
|
|
canvasContext.setLineWidth(4) // 文字宽度
|
|||
|
|
canvasContext.setLineCap('round') // 文字圆角
|
|||
|
|
canvasContext.stroke() // 文字绘制
|
|||
|
|
startX.value = temX
|
|||
|
|
startY.value = temY
|
|||
|
|
canvasContext.draw(true) // 文字绘制到画布中
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const clearSign = () => {
|
|||
|
|
canvasContext.setFillStyle('#F5F5F5'); // 设置填充颜色为红色
|
|||
|
|
canvasContext.fillRect(0, 0, canvasWidth.value, canvasHeight.value); // 填充整个画板
|
|||
|
|
canvasContext.draw(true) // 文字绘制到画布中
|
|||
|
|
signFlag.value = false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const confirm = () => {
|
|||
|
|
// 确认按钮事件
|
|||
|
|
if (!signFlag.value) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请签名后再点击确定',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '确认',
|
|||
|
|
content: '确认签名无误吗',
|
|||
|
|
showCancel: true,
|
|||
|
|
success: async ({ confirm }) => {
|
|||
|
|
if (confirm) {
|
|||
|
|
let tempFile
|
|||
|
|
// if (this.horizontal) {
|
|||
|
|
tempFile = await saveHorizontalCanvas()
|
|||
|
|
// } else {
|
|||
|
|
// tempFile = await this.saveCanvas()
|
|||
|
|
// }
|
|||
|
|
console.log(tempFile, "tempFile")
|
|||
|
|
const base64 = await pathToBase64(tempFile)
|
|||
|
|
const path = await base64ToPath(base64)
|
|||
|
|
console.log(path, "path")
|
|||
|
|
const res = await uploadImg(path, {});
|
|||
|
|
uni.navigateBack();
|
|||
|
|
uni.$emit('getSignImg', { base64, path, url: res.url });
|
|||
|
|
// uploadImg(path, {}).then(res=>{
|
|||
|
|
// console.log(base64, path, res.url, "打印")
|
|||
|
|
// let url = res.url
|
|||
|
|
// uni.$emit('getSignImg', { base64, path, url })
|
|||
|
|
// uni.navigateBack()
|
|||
|
|
// })
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
const saveHorizontalCanvas = async () => {
|
|||
|
|
return await new Promise((resolve, reject) => {
|
|||
|
|
uni.canvasToTempFilePath(
|
|||
|
|
{
|
|||
|
|
canvasId: 'canvas',
|
|||
|
|
fileType: "png", // 只支持png和jpg
|
|||
|
|
success: (res) => {
|
|||
|
|
if (!res.tempFilePath) {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '保存签名失败',
|
|||
|
|
showCancel: false
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// #ifdef APP
|
|||
|
|
uni.compressImage({
|
|||
|
|
src: res.tempFilePath,
|
|||
|
|
quality: 100, // 范围 0 - 100
|
|||
|
|
rotate: 270,
|
|||
|
|
success: (r) => {
|
|||
|
|
console.log('==== compressImage :', r)
|
|||
|
|
resolve(r.tempFilePath)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// #ifndef APP
|
|||
|
|
// uni.getImageInfo({
|
|||
|
|
// src: res.tempFilePath,
|
|||
|
|
// success: (r) => {
|
|||
|
|
// // console.log('==== getImageInfo :', r)
|
|||
|
|
// // 将signCanvas的内容复制到hsignCanvas中
|
|||
|
|
// const hcanvasCtx = uni.createCanvasContext('hsignCanvas', this)
|
|||
|
|
// // 横屏宽高互换
|
|||
|
|
// hcanvasCtx.translate(this.canvasHeight / 2, this.canvasWidth / 2)
|
|||
|
|
// hcanvasCtx.rotate(Math.PI * (-90 / 180))
|
|||
|
|
// hcanvasCtx.drawImage(
|
|||
|
|
// r.path,
|
|||
|
|
// -this.canvasWidth / 2,
|
|||
|
|
// -this.canvasHeight / 2,
|
|||
|
|
// this.canvasWidth,
|
|||
|
|
// this.canvasHeight
|
|||
|
|
// )
|
|||
|
|
// hcanvasCtx.draw(false, async () => {
|
|||
|
|
// const hpathRes = await uni.canvasToTempFilePath(
|
|||
|
|
// {
|
|||
|
|
// canvasId: 'hsignCanvas',
|
|||
|
|
// fileType: this.expFile.fileType, // 只支持png和jpg
|
|||
|
|
// quality: this.expFile.quality // 范围 0 - 1
|
|||
|
|
// },
|
|||
|
|
// this
|
|||
|
|
// )
|
|||
|
|
// let tempFile = ''
|
|||
|
|
// if (Array.isArray(hpathRes)) {
|
|||
|
|
// hpathRes.some((item) => {
|
|||
|
|
// if (item) {
|
|||
|
|
// tempFile = item.tempFilePath
|
|||
|
|
// return
|
|||
|
|
// }
|
|||
|
|
// })
|
|||
|
|
// } else {
|
|||
|
|
// tempFile = hpathRes.tempFilePath
|
|||
|
|
// }
|
|||
|
|
// resolve(tempFile)
|
|||
|
|
// })
|
|||
|
|
// }
|
|||
|
|
// })
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
console.log('图片生成失败：' + err)
|
|||
|
|
resolve(false)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
this
|
|||
|
|
)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
onReady(() => {
|
|||
|
|
// uni.showLoading({
|
|||
|
|
// title: '正在加载，请稍后...',
|
|||
|
|
// mask: true
|
|||
|
|
// })
|
|||
|
|
// 页面加载完成后设置横屏
|
|||
|
|
// plus.screen.lockOrientation('landscape-primary')
|
|||
|
|
// nextTick(() => {
|
|||
|
|
// getBtnHeight();
|
|||
|
|
// });
|
|||
|
|
// setTimeout(() => {
|
|||
|
|
// uni.hideLoading();
|
|||
|
|
uni.getSystemInfo({
|
|||
|
|
success: function (res) {
|
|||
|
|
console.log(res)
|
|||
|
|
BoxHeight.value = res.windowHeight
|
|||
|
|
canvasWidth.value = res.windowWidth
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
getBtnHeight();
|
|||
|
|
// }, 1500);
|
|||
|
|
// nextTick(() => {
|
|||
|
|
// getBtnHeight();
|
|||
|
|
// });
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
|
|||
|
|
onUnload(() => {
|
|||
|
|
// 页面卸载时恢复竖屏
|
|||
|
|
// plus.screen.lockOrientation('portrait-primary');
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.box {
|
|||
|
|
position: relative;
|
|||
|
|
width: 100vw;
|
|||
|
|
height: 100vh;
|
|||
|
|
|
|||
|
|
.tipTxt{
|
|||
|
|
position: absolute;
|
|||
|
|
top: 10rpx;
|
|||
|
|
left: 10rpx;
|
|||
|
|
color: #999;
|
|||
|
|
font-size: 44rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
position: fixed;
|
|||
|
|
width: 100vw;
|
|||
|
|
bottom: 0;
|
|||
|
|
z-index: 99;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|