Vue使用电子签名jSignature

1，引入jQuery

npm i jquery -S

2，新建jquery-vendor.js文件

import $ from 'jquery'
window.$ = window.jQuery = $
export default $

3，在你要用到jSignature的vue文件中引入jquery-vendor.js

import $ from '../../utils/jquery-vendor.js'

4，引入jSignature

import '../../assets/js/jSignature.min.js'
import '../../assets/js/jSignature.UndoButton' //回退按钮

5，jSignature的HTML

<div id="signature"></div>

6，jSignature的CSS

#signature {
    height: 300px;
    border: 2px dotted black;
    background-color: lightgrey;
}

7，使用jSignature

$('#signature').jSignature({width: '100%', height: '99%', color: '#f00', 'UndoButton': true})

8，获取base64

const signature = $('#signature').jSignature('getData', 'default')

9，base64转file

dataURLtoFile (dataURI, filename) {
    // eslint-disable-next-line one-var
    let arr = dataURI.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        atobStr = atob(arr[1]),
        n = atobStr.length,
        u8arr = new Uint8Array(n)
    while (n--) {
        u8arr[n] = atobStr.charCodeAt(n)
    }
    return new File([u8arr], filename, { type: mime })
}
const blob = this.dataURLtoFile(signature, 'signature')