npm install vue-esign --save
-
在main.js中
-
Vue.use(vueEsign)
-
<vue-esign ref="esign"
-
style="width:100%;height:83vh !important;border-bottom: 1px dashed #c2c1c1;"
-
:isCrop="isCrop"
-
:lineWidth="lineWidth"
-
:lineColor="lineColor"
-
:bgColor.sync="bgColor" />
-
<div class="btn">
-
<button @click="handleReset">重置</button>
-
<button @click="handleGenerate">确定</button>
-
</div>
-
handleReset () { // 清除
-
this.$refs.esign.reset()
-
},
-
handleGenerate () { // 获取base64
-
var _this = this
-
_this.$refs.esign.generate().then(res => {
-
// 转成文件
-
var blob = _this.dataURLtoBlob(res)
-
var tofile = _this.blobToFile(blob, '签名.jpg')
-
console.log(tofile)
-
setTimeout(async () => {
-
const formData = new FormData()
-
formData.append('file', tofile, tofile.name)
-
formData.append('fileType', 9)
-
// ajax 请求
-
})
-
}).catch(err => {
-
_this.$toast(err) // 画布没有签字时会执行这里 'Not Signned'
-
})
-
},
-
// 将base64转换为blob
-
dataURLtoBlob (dataurl) {
-
var arr = dataurl.split(',')
-
var mime = arr[0].match(/:(.*?);/)[1]
-
var bstr = atob(arr[1])
-
var n = bstr.length
-
var u8arr = new Uint8Array(n)
-
while (n--) {
-
u8arr[n] = bstr.charCodeAt(n)
-
}
-
return new Blob([u8arr], { type: mime })
-
},
-
// 将blob转换为file
-
blobToFile (theBlob, fileName) {
-
theBlob.lastModifiedDate = new Date()
-
theBlob.name = fileName
-
return theBlob
-
},
返回的是base64 所以要转码
具体看官方文档
https://www.npmjs.com/package/vue-esign
转载:https://blog.csdn.net/qq_42092177/article/details/106474091