基于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;} }

效果图：

就到这里吧！

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