vue使用canvas实现移动端手写签名
91 浏览量
2020-10-14
17:51:31
上传
评论 1
收藏 52KB PDF 举报
vue使用使用canvas实现移动端手写签名实现移动端手写签名
主要为大家详细介绍了基于vue使用canvas实现移动端手写签名，文中示例代码介绍的非常详细，具有一定的参
考价值，感兴趣的小伙伴们可以参考一下
基于vue使用canvas实现移动端手写签名！
之前自己开发有这么一个需求，需要实现手写签名，然后以图片的形式保存生成图片的base64数据流 。自己在网上找了一
堆，都不是很完美。然后参考网上的加自己的优化和修改做了一版。希望有需要的朋友可以拿来直接用。
HTML部分：
<template>
<div class="hello" >
<div>请输入您的签名7：</div>
<canvas id="canvas" ref="canvasW" width="373" height="200" style="border:1px solid black" >Canvas画板</canvas>
<img v-bind:src="url" alt="vue使用canvas实现移动端手写签名">
<div>
<button type="" v-on:click="clear">重写</button>
<button v-on:click="save">保存签名</button>
</div>
</div>
</template>
为了节约时间，样式写的比较简单。凑合看吧！
script部分
<script>
var draw;
var preHandler = function(e){e.preventDefault();}
class Draw {
constructor(el) {
this.el = el
this.canvas = document.getElementById(this.el)
this.cxt = this.canvas.getContext('2d')
this.stage_info = canvas.getBoundingClientRect()
this.path = {
beginX: 0,
beginY: 0,
endX: 0,
endY: 0
}
}
init(btn) {
var that = this;
//初始化生成
this.canvas.addEventListener('touchstart', function(event) {
document.addEventListener('touchstart', preHandler, false);
that.drawBegin(event)
})
this.canvas.addEventListener('touchend', function(event) {
document.addEventListener('touchend', preHandler, false);
that.drawEnd()
})
this.clear(btn)
}
drawBegin(e) {
var that = this;
window.getSelection() ? window.getSelection().removeAllRanges() : document.selection.empty()
this.cxt.strokeStyle = "#000"
this.cxt.beginPath()
this.cxt.moveTo(
e.changedTouches[0].clientX - this.stage_info.left,
e.changedTouches[0].clientY - this.stage_info.top
)
this.path.beginX = e.changedTouches[0].clientX - this.stage_info.left
this.path.beginY = e.changedTouches[0].clientY - this.stage_info.top
canvas.addEventListener("touchmove",function(ev){
ev.preventDefault()
that.drawing(event)
})
}
drawing(e) {
this.cxt.lineTo(
e.changedTouches[0].clientX - this.stage_info.left,
资源评论
