前端实现电子签名

具体细节就不一一说了，这篇也是学习于：前端实现电子签名（web、移动端）通用

大家感兴趣可以去看看，是通过原生canvas实现，我这篇是对其进行了改造，并用在vue项目中，并且增加了浏览器改变画板可以达到一个自适应，签名完成之后，可以拿到图片的blob对象、以及base64编码等，根据需求适当选择，直接上代码吧：

我将 签名画板单独封装为一个组件，在需要的地方引入即可，注意要给外层容器一个宽高，该组件默认为宽高都为100%

<template>
  <div style="width: 100%;height: 100%;">
    <div class="drawing-board">
      <canvas id="canvas"></canvas>
    </div>
    <div class="tool-bar">
      <el-button @click="reset()" size="small" type="primary">清除</el-button>
      <el-button @click="save()" size="small" type="success&