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="">

<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,

e.changedTouches[0].clientY - this.stage_info.top

)

this.path.endX = e.changedTouches[0].clientX - this.stage_info.left

this.path.endY = e.changedTouches[0].clientY - this.stage_info.top

this.cxt.stroke()

}

drawEnd() {

document.removeEventListener('touchstart', preHandler, false);

document.removeEventListener('touchend', preHandler, false);

document.removeEventListener('touchmove', preHandler, false);

}

clear(btn) {

this.cxt.clearRect(0, 0, this.stage_info.width, this.stage_info.height)

// this.cxt.clearRect(0, 0, 373, 200)

}

save(){

return canvas.toDataURL("image/png")

console.log(canvas.toDataURL("image/png"))

}

}

export default {

data () {

return {

msg: '啦啦啦',

val:true,

url:""

}

},

mounted() {

draw=new Draw('canvas');

draw.init();

},

methods:{

clear:function(){

draw.clear();

// 用于点击清除画布时,同时清除上次保存的图片

this.save()

},

save:function(){

var data=draw.save();

this.url = data;

// 生成图片的base64数据流

},

  mutate(word){

this.$emit("input", word);

},

}

}

</script>

css部分

<style scoped lang="less">

.hello{

height: 100%;

width: 100%;

background: #ccc;

h1, h2 { font-weight: normal; }

ul { list-style-type: none; padding: 0; }

li { display: inline-block; margin: 0 10px; }

a { color: #42b983; }

#canvas { background: pink; cursor: default; }

#keyword-box { margin: 10px 0; }

button{font-size: 0.2rem;color: blue;}

}

效果图:

就到这里吧!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是 vue使用canvas实现移动端手写签名 的全部内容, 来源链接: utcz.com/p/238157.html

回到顶部