功能說明：

1. 相容 PC 和 Mobile；
2. 畫布自適應螢幕大小變化（視窗縮放、螢幕旋轉時畫布無需重置，自動校正座標）；
3. 自定義畫布尺寸（匯出圖尺寸），畫筆粗細、顏色，畫布背景色；
4. 支援裁剪 （針對需求：有的簽字需要裁剪掉四周空白）。
5. 匯出圖片格式為base64；

1. 安裝使用外掛===>>>  npm install vue-esign
2. main.js檔案中引入 
   ​       import vueEsign from 'vue-esign'
   ​       Vue.use(vueEsign)
3. 上程式碼

        <template>
          <div class="home"> 
            <vue-esign
              ref="esign"
              :width="300"
              :height="300"
              :isCrop="isCrop"
              :lineWidth="lineWidth"
              :lineColor="lineColor"
              :bgColor.sync="bgColor"
            />
            <button @click="handleReset">清空畫板</button>
            <button @click="handleGenerate">生成圖片</button>
          </div>
        </template>

        <script>
        export default {
          data () {
            return {
              lineWidth: 6,
              lineColor: 'red',
              bgColor: '',
              resultImg: '',
              isCrop: false
            }
          },
          methods: {
            handleReset () {
              this.$refs.esign.reset()
            },
            handleGenerate () {
              this.$refs.esign
                .generate()
                .then(res => {
                  this.resultImg = res
                  console.log(res)
                })
                .catch(err => {
                  alert('hfjdksafjdksl;j') // 畫布沒有簽字時會執行這裡 'Not Signned'
                })
            }
          }
        }
        </script>
        <style lang="less" scoped>
        ::v-deep canvas[data-v-25d47434] {
          border: 1px solid red;
        }
        </style>