使用vue-esign实现手写签名并上传

最新推荐文章于 2023-12-28 17:29:40 发布

湖.

最新推荐文章于 2023-12-28 17:29:40 发布

阅读量336

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/luoxi_xi/article/details/132034412

版权

效果截图

在这里插入图片描述

安装插件：

npm install vue-esign --save

使用：

1.在main.js中引入

import vueEsign from 'vue-esign'
Vue.use(vueEsign)

2.在页面中引用

<vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
<el-button type="primary" size="mini" @click="handleReset">清空画板</el-button>
<el-button type="primary" size="mini" @click="handleUpload">上传签名</el-button>

3.完整功能代码

htmlimport { uploadGrayFile } from "@/XXXX";
export default {
	data () {
	  return {
	    lineWidth: 6,
	    lineColor: '#000000',
	    bgColor: '',
	    resultImg: '',
	    isCrop: false,
        resultImageUrl: "",
	  }
	},
	methods: {
	  handleReset () {
	    this.$refs['esign'].reset() //清空画布
	  },
	  handleUpload () {
	    this.$refs['esign'].generate().then(res => {
	      const bl = this.convertBase64UrlToBlob(res);
	      const formData = new FormData();
	      formData.append("file", bl, Date.now() + ".jpeg");
	      uploadGrayFile(formData).then((response) => {
	        if (response.code == 200) {
	          this.resultImageUrl = response.path
	          this.$message({
	            message: '签名上传成功！',
	            type: 'success'
	          })
	          return;
	        }
	        this.$vux.loading.hide();
	        this.$toast("签名上传失败！");
	      })
	    }).catch(err => { //  没有签名，点击生成图片时调用
	      this.$message({
	        message: '请先签名！',
	        type: 'warning'
	      })
	      // alert(err) // 画布没有签字时会执行这里 'Not Signned'
	    })
	  },
	  convertBase64UrlToBlob(urlData) {
	    const type = "image/jpeg";
	    let bytes = null;
	    if (urlData.split(",").length > 1) {
	      bytes = window.atob(urlData.split(",")[1]);
	    } else {
	      bytes = window.atob(urlData);
	    }
	    let ab = new ArrayBuffer(bytes.length);
	    let ia = new Uint8Array(ab);
	    for (let i = 0; i < bytes.length; i++) {
	      ia[i] = bytes.charCodeAt(i);
	    }
	    return new Blob([ab], { type });
	  }
	}
};
</script>