Vue3实现在线签名_vue3 移动端签名采集怎么做

在线签名

代码实现

<template>
    <h3>在线签名</h3>
    <div ref="mainboard" class="container">
        <div class="mianboard" :style="{
            width: data.size.width + 'px',
            height: data.size.height + 'px'
        }">
            <!-- 主画板 -->
            <canvas id="main" :width="data.size.width" :height="data.size.height"></canvas>
            <!-- 签名绘制浮层画板 -->
            <div ref="floatboard" v-show="show" class="floatboard" :style="{
                left: left + 'px',
                top: top + 'px'
            }" @mousedown="floatMouseDown">
                <canvas id="float" width="200" height="80"></canvas>
            </div>
            <div class="sab">
                <button @click="save">保存</button>
                <button @click="backInit">清除</button>
            </div>

        </div>
        <div class="signboard">
            <!-- 签名画板 -->
            <canvas id="sign" width="600" height="400" @mousedown="signMousedown" @mousemove="signMousemove"
                @mouseup="signMouseup"></canvas>
            <div>
                <button @click="clearSign">清除</button>
                <button @click="sendSignToFloat">确认</button>
            </div>

        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
/* 画板相关变量 */
// 全局变量
let float = null;
let floatCtx = null;
let sign = null;
let signCtx = null;
let main = null;
let mainCtx = null;
let left = ref(0);
let top = ref(0)
let show = ref(false)

// 后端数据
const data = {
    baseUrl: 'http://localhost:8080/img/%E6%8A%A5%E9%94%80%E5%8D%95.cd8b07df.jpg',
    size: {
        width: 600,
        height: 400
    }
}
/* 主画板和其相关变量 */
onMounted(() => {
    // 获取主画板并且初始化为canvas画布
    main = document.getElementById('main');
    mainCtx = main.getContext('2d');
    // 绘制合同图片为背景
    const img = new Image();
    img.src = data.baseUrl;
    img.onload = function () {
        mainCtx.drawImage(img, 0, 0, data.size.width, data.size.height);
    }
})
// 保存签名
function save() {
    mainCtx.drawImage(float, left.value, top.value, 200, 80);
    // 将画板内容转换为 base64数据
    let base = main.toDataURL();
    show.value = false;
}
// 清除签名
function backInit() {
    mainCtx.clearRect(0, 0, data.size.width, data.size.height)
    // 绘制合同图片为背景
    const img = new Image();
    img.src = data.baseUrl;
    img.onload = function () {
        mainCtx.drawImage(img, 0, 0, data.size.width, data.size.height);
    }
    show.value = false;
    left.value = 0;
    top.value = 0
}

/* 签名版和其相关变量 */
let canSign = false;
onMounted(() => {
    // 获取签名板并且初始化为canvas画布
    sign = document.getElementById('sign');
    signCtx = sign.getContext('2d');
})
// 监听鼠标按下事件
function signMousedown(e) {
    canSign = true;
    // 重新绘制
    signCtx.beginPath()
    signCtx.moveTo(e.offsetX, e.offsetY);
    // 设置线条样式
    signCtx.lineWidth = 5;
    signCtx.strokeStyle = "red";
}
// 监听鼠标移动事件
function signMousemove(e) {
    if (canSign) {
        signCtx.lineTo(e.offsetX, e.offsetY);
        signCtx.stroke()
    }
}
// 监听鼠标松开事件
function signMouseup() {
    canSign = false
}
// 清除画板
function clearSign() {
    signCtx.clearRect(0, 0, sign.width, sign.height)
}
// 确认签名
function sendSignToFloat() {
    floatCtx.drawImage(sign, 0, 0, 200, 80);
    show.value = true
}

/* 签名悬浮板相关逻辑 */
onMounted(() => {
    // 获取悬浮板并且初始化为canvas画布
    float = document.getElementById('float');
    floatCtx = float.getContext('2d');

})
/* 拖拽相关代码 */
// 鼠标按下点和推拽元素的距离
let distanceX = 0;
let distanceY = 0;
let mainboard = ref()
let floatboard = ref()
function floatMouseDown(e) {
    /* pageX 是鼠标点距离屏幕X轴的距离
    offsetLeft 是自身元素左边距和上一个定位元素的距离 */
    distanceX = e.pageX - mainboard.value.offsetLeft - floatboard.value.offsetLeft;
    distanceY = e.pageY - mainboard.value.offsetTop - floatboard.value.offsetTop;
    function move(e) {
        left.value = e.pageX - mainboard.value.offsetLeft - distanceX;
        top.value = e.pageY - mainboard.value.offsetTop - distanceY
    }
    document.addEventListener('mousemove', move, false)
    document.addEventListener('mouseup', () => {
        // 移除监听事件
        document.removeEventListener('mousemove', move)
    }, false)
}
</script>

<style scoped>
.container {
    display: flex;
    position: relative;
}

.mianboard {
    border: 1px solid;
    margin-right: 20px;
}

.floatboard {
    position: absolute;
    border: 1px solid
}
.sab{
    margin-top: 10px;
}

.signboard {
    display: flex;
    flex-direction: column;
    height: 400px;
    border: 2px dashed #8e9bf1;
}

.signboard div {
    margin-top: 10px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188

‍