vue-esign签字板,鼠标写名,支持PC\移动端,返回base64或者file格式的文件流
1 、安装插件 vue-esignnpm install vue-esign --save2、在main.js引用import vueEsign from 'vue-esign'Vue.use(vueEsign)3、页面中使用<vue-esign id='canvas' ref="esign" :width='1000' :height="500" style="border: 1px da
·
vue里实现鼠标签名,支持PC\移动端,返回base64或者file格式的文件流
1 、安装插件 vue-esign
npm install vue-esign --save
2、在main.js引用
import vueEsign from 'vue-esign'
Vue.use(vueEsign)
3、页面中使用
<vue-esign id='canvas' ref="esign" :width='1000' :height="500" style="border: 1px dashed #c2c1c1;" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
<div style="text-align:center;line-height:50px; ">
<el-button style="margin: 0px 20px;" @click="handleReset" size="small">清空</el-button>
<el-button style=" margin: 0px 20px;" type="primary" @click="handleGenerate" size="small">保存</el-button>
</div>
引入地址
import {baseUrl} from '@/utils/env.js';
data () {
return {
lineWidth: 6,
lineColor: '#000000',
bgColor: '',
resultImg: '',
isCrop: false
}
},
4、返回数据为base64 具体看你返回得数据
handleGenerate() { // 获取base64
var _this = this
_this.$refs.esign.generate().then(res => {
// 转成文件
var blob = _this.dataURLtoBlob(res)
var tofile = _this.blobToFile(blob, '签名.jpg')
setTimeout(async () => {
const formData = new FormData()
formData.append('file', tofile, tofile.name)
formData.append('fileType', 9)
// ajax 请求
})
}).catch(err => {
// 画布没有签字时提示
this.$notify({
title: '提示',
message: '失败',
type: 'warning'
});
})
},
// 将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
},
5、清除
handleReset() { // 清除
if (this.$refs.esign) {
this.$refs.esign.reset();
}
var obj = document.getElementById("canvas");
obj.style.backgroundColor = "#fff"; 保存时背景
},
6、图例
开源地址:
更多推荐
已为社区贡献25条内容
所有评论(0)