signature----HTML5 canvas簽名插件使用指南

項目的github地址： https://github.com/szimek/signature_pad

第一步：

項目引入

第二步：

代碼引入

　　

初始化：

　　

　　相關配置參數可以參考API

　　它是需要基於canvas的，所以需要有

　　

 

做完以上操作，接着就是如何處理簽名圖片了

第三步：

　　處理代碼如下

     // 使用isEmpty方法判斷簽名是否為空
      if (this.signaturePad.isEmpty()) {
        this.$toast.error('請簽名')
        return
      }
      // 使用canvas的toDataURL方法返回一個包含圖片展示的 data URI
      const data = this.signaturePad.toDataURL()
      // dataURLToBlob方法將數據轉化為Blob類型
      const myBlob = this.dataURLToBlob(data)
      const formData = new FormData()
      // 在fromData中添加Blob類型的內容
      formData.append('uploadFile', myBlob, 'sig.png')
      // 然后就可以拿formData去上傳啦 

dataURLToBlob方法：

dataURLToBlob (dataURL) {
      // Code taken from https://github.com/ebidel/filer.js
      var parts = dataURL.split(';base64,')
      var contentType = parts[0].split(':')[1]
      var raw = window.atob(parts[1])
      var rawLength = raw.length
      var uInt8Array = new Uint8Array(rawLength)
      for (var i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i)
      }
      return new Blob([uInt8Array], { type: contentType })
    },