因项目需求需要实现电子签名,记录手绘笔迹并保存为base64图片(因是移动端项目,在浏览器调试的时候必须打开移动设备模式,否则绘制不了)
<template>
<div>
<div class="signature">
<div id="canvas"></div>
</div>
<button id="clearCanvas">重新签名</button>
<button id="saveCanvas" @click="saveSign">确定保存</button>
</div>
</template>
<script>
export default {
data() {
return {
};
},
mounted() {
this.init_lineCanvas();
},
methods: {
// 保存签名
saveSign() {
setTimeout(() => {
this.imgBase64 = localStorage.getItem("imgBase64");
/* 电子签名base64图片上传*/
//接口上传
}, 500);
},
init_lineCanvas() {
document.addEventListener(
"touchmove",
function(event) {
event.preventDefault();
},
{ passive: false }
);
new t