vue使用smooth-signature实现移动端电子签字,包括横竖屏

vue使用smooth-signature实现移动端电子签字,包括横竖屏

1.使用smooth-signature

复制代码
npm install --save smooth-signature

二.页面引入插件

js 复制代码
import SmoothSignature from "smooth-signature";

三.实现效果

四.完整代码

js 复制代码
<template>
  <div class="sign-finish">
    <div class="wrap1" v-show="showFull">
      <span class="sign-title">请在区域内签字</span>
      <canvas class="canvas1" ref="canvas1" />
      <div class="actions">
          <button class="danger" @click="handleClear1" >清除</button>
          <button class="warning" @click="handleUndo1" >撤销</button>
          <button class="primary" @click="handleFull" >横屏</button>
          <button class="success" @click="handlePreview1" >保存</button>
      </div>
    </div>
    <div class="wrap2" v-show="!showFull">
      <div class="actionsWrap">
        <div class="actions">
          <button class="danger" @click="handleClear1" >清除</button>
          <button class="warning" @click="handleUndo1" >撤销</button>
          <button class="primary" @click="handleFull" >竖屏</button>
          <button class="success" @click="handlePreview1" >保存</button>
        </div>
      </div>
      <canvas class="canvas" ref="canvas2" />
    </div>
  </div>
</template>

<script>
import SmoothSignature from "smooth-signature";
export default {
  name: "mbDemo",
  data() {
    return {
      showFull: true,
    };
  },
  mounted() {
    this.initSignature1();
    this.initSignture2();
  },
  methods: {
    initSignature1() {
      const canvas = this.$refs["canvas1"];
      const options = {
        width: window.innerWidth - 30,
        height: 200,
        minWidth: 2,
        maxWidth: 6,
        openSmooth:true,
        // color: "#1890ff",
        bgColor: '#f6f6f6',
      };
      this.signature1 = new SmoothSignature(canvas, options);
    },
    initSignture2() {
      const canvas = this.$refs["canvas2"];
      const options = {
        width: window.innerWidth - 120,
        height: window.innerHeight - 80,
        minWidth: 3,
        maxWidth: 10,
        openSmooth:true,
        // color: "#1890ff",
        bgColor: '#f6f6f6',
      };
      this.signature2 = new SmoothSignature(canvas, options);
    },
    handleClear1() {
      this.signature1.clear();
    },
    handleClear2() {
      this.signature2.clear();
    },
    handleUndo1() {
      this.signature1.undo();
    },
    handleUndo2() {
      this.signature2.undo();
    },
    handleFull() {
      this.showFull = !this.showFull;
    },
    handlePreview1() {
      const isEmpty = this.signature1.isEmpty();
      if (isEmpty) {
        alert("isEmpty");
        return;
      }
      const pngUrl = this.signature1.getPNG();
      console.log(pngUrl);
      // window.previewImage(pngUrl);
    },
    handlePreview2() {
      const isEmpty = this.signature2.isEmpty();
      if (isEmpty) {
        alert("isEmpty");
        return;
      }
      const canvas = this.signature2.getRotateCanvas(-90);
      const pngUrl = canvas.toDataURL();
      console.log('pngUrl',pngUrl);
      // window.previewImage(pngUrl, 90);
    },
  },
};
</script>

<style lang="less">
.sign-finish {
  height: 100vh;
  width: 100vw;
  button {
    height: 32px;
    padding: 0 8px;
    font-size: 12px;
    border-radius: 2px;
  }
  .danger {
    color: #fff;
    background: #ee0a24;
    border: 1px solid #ee0a24;
  }
  .warning {
    color: #fff;
    background: #ff976a;
    border: 1px solid #ff976a;
  }
  .primary {
    color: #fff;
    background: #1989fa;
    border: 1px solid #1989fa;
  }
  .success {
    color: #fff;
    background: #07c160;
    border: 1px solid #07c160;
  }
  canvas {
    border-radius: 10px;
    border: 2px dashed #ccc;
    
  }
  .wrap1 {
    height: 100%;
    width: 96%;
    margin: auto;
    margin-top: 100px;
    .actions {
      display: flex;
      justify-content: space-around;
    }
  }
  .wrap2 {
    padding: 15px;
    height: 100%;
    display: flex;
    justify-content: center;
    .actionsWrap {
      width: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .canvas {
      flex: 1;
    }
    .actions {
      margin-right: 10px;
      white-space: nowrap;
      transform: rotate(90deg);
      button{
          margin-right: 20px;
      }
    }
  }
}
</style>

五.参考

https://github.com/linjc/smooth-signature

相关推荐
开开心心就好31 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享32 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君7 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js