如何用Vue结合Canvas在移动端轻松实现长尾词手写签名功能？

本文共计727个文字，预计阅读时间需要3分钟。

基于Vue使用canvas实现移动端手写签名！之前自己开发有这样一个需求，需要实现手写签名功能，然后将签名以图片的形式保存，生成图片的base64数据流。自己在网上找了一堆解决方案，都不是很完美。

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

为了节约时间，样式写的比较简单。