1，引入第三方库来实现
// 安装fabric.js
npm install fabric --save
2，代码实现
在页面引入
import { fabric } from "fabric";
<template>
<canvas id="canvas" width="450" height="240"></canvas>
<button @click="saveSignature">保存签名</button>
<img :src="dataUrls" />//在这里就能预览签名的图片了
</template>
data() {
return {
dataUrls: "",
};
},
mounted() {
// 实例化fabric canvas
this.canvas = new fabric.Canvas("canvas", {
isDrawingMode: true,//表示可以进行绘图操作。
});
},
methods: {
// 保存签名
saveSignature() {
const dataUrl = this.canvas.toDataURL({
format: "png",
quality: 1,
enableRetinaScaling: 1,
multiplier: 1,
});
// 签名数据保存为图片
this.dataUrls = dataUrl;
this.changeToImage(this.dataUrls);
// console.log(dataUrl);
},
changeToImage(base64) {
return `data:image/png;base64,${base64}`;
},
},
首先在template中添加了一个div，用来显示签名区域。然后通过fabric库实例化了一个canvas，设置isDrawingMode为true，表示可以进行绘图操作。文章来源：https://www.toymoban.com/news/detail-609984.html
methods中，实现了保存签名的方法，通过canvas.toDataURL()方法将签名数据转化为base64编码的png图片，文章来源地址https://www.toymoban.com/news/detail-609984.html
到了这里，关于前端VUE实现电子签名的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
