html:

<template> <div> <vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" : bgcolor. sync="bgColor" /> < button@click ="handleReset"> Empty the artboard </button> <button <img: SRC =" SRC "Alt =""> </div></template>Copy the code

src:

<script>export default { data() { return { lineWidth: 6, lineColor: "#000000", bgColor: "", resultImg: "", isCrop: false, src:'' }; }, methods: { handleReset() { this.$refs.esign.reset(); }, handleGenerate() { var that=this this.$refs.esign .generate() .then((res) => { // console.log(res); this.resultImg = res; var arr = res.split(","), mime = arr[0].match(/:(.*?) ; /)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } var files = new File([u8arr], "filename", { type: mime }); Var fr = new FileReader(); fr.onload = function () { that.src=this.result console.log(this.result); // Convert base64 to file stream via FileReader}; fr.readAsDataURL(files); }) .catch((err) => { alert(err); // The canvas is Not signed when executed here 'Not Signned'}); ,}}}; </script>Copy the code