Vue怎么使用sign-canvas实现在线手写签名

这篇文章主要讲解了“Vue怎么使用sign-canvas实现在线手写签名”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue怎么使用sign-canvas实现在线手写签名”吧！

效果图：

sign-canvas 一个基于 canvas 开发,封装于 Vue 组件的通用手写签名板(电子签名板),支持 pc 端和移动端。

更新日志

v1.1.4 功能更新：增加全屏手写方案，可以通过 options.isFullScreen,和 options.isFullCover 属性控制,全屏模式下 canvasWidth 和 canvasHeight 属性设置无效,感谢网友 AFelicity”的建议与反馈。

v1.1.3 功能更新：增加高倍屏下，绘制会模糊的适配方案，可以通过 options.isDpr 属性进行开启或者关闭，感谢网友“Wong-Harry”的建议与反馈。

安装

npm install --save sign-canvas

全局方式

main.js：

import SignCanvas from "sign-canvas";Vue.use(SignCanvas);

局部方式

//局部注册 模板中引入

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

 完整代码： 

<template>  <div class="sign">    <sign-canvas      class="sign-canvas"      ref="SignCanvas"      :options="options"      v-model="value"    />    <div class="btnList" ref="btnList">      <van-button type="danger" v-throttle size="small" @click="clearSignImg">清空</van-button>      <van-button type="primary" v-throttle size="small" class="ml30 mr30" @click="saveSignImg">保存</van-button>      <van-button type="primary" v-throttle size="small" @click="back">返回</van-button>    </div>  </div></template><script>//接口引入import { signShipmentsContract } from "../../api/userMG";export default {  name: "signDialog",  //props: {    //组件传递的值    //visible: {      //type: Boolean,      //default: false,    //},    //图片信息Base64    //class="lazy" data-src: {      //type: String,      //default: null,    //},  //},  data() {    return {      value: null,      //配置      options: {        lastWriteSpeed: 1, //书写速度 [Number] 可选        lastWriteWidth: 2, //下笔的宽度 [Number] 可选        lineCap: "round", //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square]正方形线帽        lineJoin: "round", //线条交汇时边角的类型  [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。        canvasWidth: "750", //canvas宽高 [Number] 可选        canvasHeight: "500", //高度  [Number] 可选        isShowBorder: false, //是否显示边框 [可选]        bgColor: "#fcc", //背景色 [String] 可选        borderWidth: 1, // 网格线宽度  [Number] 可选        borderColor: "#ff787f", //网格颜色  [String] 可选        writeWidth: 5, //基础轨迹宽度  [Number] 可选        maxWriteWidth: 30, // 写字模式最大线宽  [Number] 可选        minWriteWidth: 5, // 写字模式最小线宽  [Number] 可选        writeColor: "#101010", // 轨迹颜色  [String] 可选        isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框        imgType: "png", //下载的图片格式  [String] 可选为 jpeg  canvas本是透明背景的      },    };  },  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: {    //清除画板    clearSignImg() {      this.$refs.SignCanvas.canvasClear();    },    // 保存图片    saveSignImg() {      console.log(this.value, "value");      if (this.value == null) {        this.$toast.fail("请先签名");      } else {        this.$dialog          .confirm({            title: "签名确认",            message: "请先确认签名是否正确,一旦签名成功，无法撤销",          })          .then(() => {            console.log(1);            const img = this.$refs.SignCanvas.saveAsImg();            this.signShipmentsContractFun(img);          })          .catch(() => {            console.log(2);            this.$toast.fail({              message: "签名取消,请重新签名",              onClose: () => {                this.$refs.SignCanvas.canvasClear();              },            });          });      }    },    //下载图片/    // downloadSignImg() {    //   this.$refs.SignCanvas.downloadSignImg();    // },    back() {      this.$router.back(-1);    },    // 签名    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, "签名");          if (res.code == 200) {            this.$toast.success({              message: "保存成功",              onClose: () => {                this.$router.back(-1);              },            });          } else {            this.$toast.fail(res.msg);          }        })        .catch((error) => {});    },  },};</script><style lang="scss" scoped>.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;}</style>

感谢各位的阅读，以上就是“Vue怎么使用sign-canvas实现在线手写签名”的内容了，经过本文的学习后，相信大家对Vue怎么使用sign-canvas实现在线手写签名这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！