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

This article mainly explains "Vue how to use sign-canvas to achieve online handwritten signature", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "Vue how to use sign-canvas to achieve online handwritten signature" bar!

Effect picture:

Sign-canvas is a general handwriting signature board (electronic signature board) developed based on canvas and encapsulated in Vue components, which supports pc and mobile.

Update log

V1.1.4 function update: added full-screen handwriting scheme, which can be controlled by options.isFullScreen and options.isFullCover properties. CanvasWidth and canvasHeight properties settings are not valid in full-screen mode. Thanks to netizens AFelicity for your suggestions and feedback.

V1.1.3 function update: add an adaptation scheme that will be blurred under the high-power screen, which can be turned on or off through the options.isDpr attribute. Thanks to the netizen "Wong-Harry" for your suggestions and feedback.

Install npm install-- save sign-canvas global mode

Main.js:

Import SignCanvas from "sign-canvas"; Vue.use (SignCanvas); Local mode

/ / introduced into the local registration template

Import SignCanvas from "sign-canvas"; components: {SignCanvas;}

Complete code:

Clear and save the return / / interface to introduce import {signShipmentsContract} from ".. / api/userMG" Export default {name: "signDialog", / / props: {/ / component passed value / / visible: {/ / type: Boolean, / / default: false, / /}, / / picture information Base64 / / src: {/ / type: String, / / default: null, / /}, / /}, data () {return {value: null / / configure options: {lastWriteSpeed: 1, / / Writing speed [Number] optional lastWriteWidth: 2, / / width of the pen [Number] optional lineCap: "round", / / Edge type of the line [butt] flat edge [round] Circular wire cap [square] square wire cap lineJoin: "round" / / Type of corners when lines meet [bevel] create bevel [round] create fillet [miter] create sharp corners. CanvasWidth: canvasWidth, / / canvas width and height [Number] optional canvasHeight: "500", / / height [Number] optional isShowBorder: false, / / whether to display the border [optional] bgColor: "# fcc", / / background color [String] optional borderWidth: 1, / / gridline width [Number] optional borderColor: "# ff787f" / / Grid color [String] optional writeWidth: 5, / / Base track width [Number] optional maxWriteWidth: 30, / / maximum linewidth of writing mode [Number] optional minWriteWidth: 5, / / minimum linewidth of writing mode [Number] optional writeColor: "# 101010", / / track color [String] optional isSign: true / / signature mode [Boolean] defaults to non-signature mode and has wireframe. When set to true, there is no wireframe imgType: "png". / / the downloaded image format [String] can be selected as jpeg canvas with transparent background},}. }, created () {}, mounted () {let windowHeight = document.documentElement.clientHeight; let btnList = this.$refs.btnList.offsetHeight; let windowWidth = document.documentElement.clientWidth; this.options.canvasWidth = windowWidth; this.options.canvasHeight = windowHeight-btnList / / console.log (this.$refs.SignCanvas.saveAsImg (), "this.$refs.SignCanvas.saveAsImg ()")}, methods: {/ / clear artboard clearSignImg () {this.$refs.SignCanvas.canvasClear ();}, / / Save saveSignImg () {console.log (this.value, "value") If (this.value = = null) {this.$toast.fail ("please sign first") } else {this.$dialog .confirmation ({title: "signature confirmation", message: "Please confirm whether the signature is correct first. Once the signature is successful, it cannot be revoked",}) .then () = > {console.log (1); const img = this.$refs.SignCanvas.saveAsImg () This.signShipmentsContractFun (img);}) .catch () = > {console.log (2); this.$toast.fail ({message: "sign off, please re-sign", onClose: () = > {this.$refs.SignCanvas.canvasClear ();},}) });}}, / / download pictures / downloadSignImg () {/ / this.$refs.SignCanvas.downloadSignImg (); / /}, back () {this.$router.back (- 1) }, / / signature signShipmentsContractFun (img) {let params = {contractId: this.$route.query.contractId, carrierContractPicture: img, contractInfoDto: JSON.parse (this.$route.query.contractList),}; signShipmentsContract (params) .then ((res) = > {console.log (res, "signature") If (res.code = = 200) {this.$toast.success ({message: "saved successfully", onClose: () = > {this.$router.back (- 1);},});} else {this.$toast.fail (res.msg) ) .catch ((error) = > {});},},}; .btnList {position: fixed; bottom: 0; left: 0; width: 100%; padding: 30px 0; display: flex; justify-content: center;}. Sign-canvas {display: block; margin: 0 auto; background: # F1F1F1! important; border-radius: 8px } Thank you for reading, the above is the content of "how Vue uses sign-canvas to achieve online handwritten signature". After the study of this article, I believe you have a deeper understanding of how Vue uses sign-canvas to achieve online handwritten signature, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.