Shulou(Shulou.com)05/31 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.