How to realize the demo of vue vue-esign signature board

This article mainly explains "how to realize the demo of vue vue-esign signature board". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "how to realize the demo of the vue vue-esign signature board"!

Vue vue-esign signature board demo

Use vue-esign to enable users to manually sign and return to a file stream in base64 or file format

Install npm install vue-esign-- save globally references import vueEsign from 'vue-esign'Vue.use (vueEsign) in main.js

Demo

Reset OK export default {name: "Esign", data () {return {lineWidth: 6, lineColor: "# 000000", bgColor: ", resultImg:", isCrop: false,};}, methods: {handleReset () {/ / clear this.$refs.esign.reset () }, handleGenerate () {/ / get base64 var _ this = this; _ this.$refs.esign .generate () .then ((res) = > {/ / convert file var file = _ this.dataURLtoFile (res)) Console.log ("file:", file) / / call interface uploadFile (file). Then (({data}) = > {console.log (_ "data:", data)});}) .catch ((err) = > {_ this.$toast (err);}) }, / / convert base64 to file dataURLtoFile (dataurl) {let arr = dataurl.split (","); let mime = arr [0] .match (/: (. *?); /) [1]; let bytes = atob (arr [1]); / / decode base64 let n = bytes.length; let ia = new Uint8Array (n) While (bytes.charCodeAt -) {ia [n] = bytes.charCodeAt (n);} return new File ([ia], "easign.jpg", {type: mime});},}; .btn {display: flex; justify-content: space-around; margin-top: 10px;} vue mobile electronic signature demo

HTML

Cancel resignature confirmation

JS related code

Var draw;var preHandler = function (e) {e.preventDefault ();}; class Draw {constructor (el) {this.el = el; this.canvas = document.getElementById (this.el); this.cxt = this.canvas.getContext ("2d"); this.stage_info = canvas.getBoundingClientRect (); this.path = {beginX: 0, beginY: 0, endX: 0, endY: 0} } init (btn) {var that = this; this.canvas.addEventListener ("touchstart", function (event) {document.addEventListener ("touchstart", preHandler, false); that.drawBegin (event);}); this.canvas.addEventListener ("touchend", function (event) {document.addEventListener ("touchend", preHandler, false); that.drawEnd ();}); this.clear (btn) } drawBegin (e) {var that = this; window.getSelection ()? Window.getSelection () .removeAllRanges (): document.selection.empty (); this.cxt.strokeStyle = "# BC4C2D"; this.cxt.beginPath (); this.cxt.moveTo (e.changedTouches [0] .clientX-this.stage_info.left, e.changedTouches [0] .clientY-this.stage_info.top); this.path.beginX = e.changedTouches [0] .clientX-this.stage_info.left This.path.beginY = e.changedTouches [0] .clientY-this.stage_info.top; canvas.addEventListener ("touchmove", function () {that.drawing (event);});} drawing (e) {this.cxt.lineTo (e.changedTouches [0] .clientX-this.stage_info.left, e.changedTouches [0] .clientY-this.stage_info.top) This.path.endX = e.changedTouches [0] .clientX-this.stage_info.left; this.path.endY = e.changedTouches [0] .clientY-this.stage_info.top; this.cxt.stroke ();} drawEnd () {document.removeEventListener ("touchstart", preHandler, false); document.removeEventListener ("touchend", preHandler, false); document.removeEventListener ("touchmove", preHandler, false) / / canvas.ontouchmove = canvas.ontouchend = null} clear (btn) {this.base64Id = ""; this.cxt.clearRect (0,0500,600);} save () {var blank = document.createElement ("canvas"); / / the system gets an empty canvas object blank.width = canvas.width; blank.height = canvas.height; let flag = canvas.toDataURL ("image/png") = = blank.toDataURL () Empty if the comparison value is equal; if (flag) {return "0";} else {return canvas.toDataURL ("image/png");}} export default {data () {return {singImgUrl: ""};}, methods: {clear () {draw.clear (); this.base64Id = "" }, save () {var data = ""; data = draw.save (); if (data = = "0") {this.$toast ("Please sign first and then click OK ~");} else {this.singImgUrl = data / data is the signed image in base64 format, which can be uploaded to the server} / /},}, mounted () {document.getElementById ("canvasBox") .addEventListener ("touchmove", (e) = > {e.preventDefault ();}) / / prevent browser default behavior, prevent signature browser drop-down-very important this.base64Id = ""; let _ width = this.$refs.canvasBox.offsetWidth; this.$refs.canvas.width = _ width; / / adapt the mobile width to canvas draw = new Draw ("canvas"); draw.init () }} at this point, I believe you have a deeper understanding of "how to realize the demo of the vue vue-esign signature board". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!