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

这篇具有很好参考价值的文章主要介绍了vue使用smooth-signature实现移动端电子签字,包括横竖屏。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

1.使用smooth-signature

npm install --save smooth-signature

二.页面引入插件

import SmoothSignature from "smooth-signature";

三.实现效果

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

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

四.完整代码

<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文章来源地址https://www.toymoban.com/news/detail-724834.html

到了这里,关于vue使用smooth-signature实现移动端电子签字,包括横竖屏的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用JavaScript和Vue.js框架开发的电子商务网站,实现商品展示和购物车功能

    引言: 随着互联网的快速发展和智能手机的普及,电子商务行业正迎来一个全新的时代。越来越多的消费者选择网上购物,而不再局限于传统的实体店。这种趋势不仅仅是改变了消费者的习惯购物,也给企业带来了巨大的商机。为了不断满足消费者的需求,电子商务网站需要

    2024年02月15日
    浏览(59)
  • VUE使用Three.js实现模型,点击交互,相机旋转视角跟随移动(Threejs中使用Tweenjs,含demo源码)

    目录 一、Three.js是什么? 二、VUE简单使用Three.js步骤 1.npm安装 2.template模板 3.引入库 4.定义全局变量 5.初始化场景 6.初始化相机 7.初始化灯光 8.初始化渲染器 9.创建模型(这里我搭建的模型是一个简单双面货架模型) 10.根据浏览器窗口自适应 11.初始化函数,页面加载完成时调用

    2024年02月03日
    浏览(69)
  • 标签平滑(label smoothing) torch和tensorflow的实现

    在常见的多分类问题中,先经过softmax处理后进行交叉熵计算,原理很简单可以将计算loss理解为,为了使得网络对测试集预测的概率分布和其真实分布接近,常用的做法是使用one-hot对真实标签进行编码,然后用预测概率去拟合one-hot的真实概率。但是这样会带来两个问题: 无

    2024年02月01日
    浏览(38)
  • 前端VUE实现电子签名

    1,引入第三方库来实现 2,代码实现 在页面引入 首先在template中添加了一个div,用来显示签名区域。然后通过fabric库实例化了一个canvas,设置isDrawingMode为true,表示可以进行绘图操作。 methods中,实现了保存签名的方法,通过canvas.toDataURL()方法将签名数据转化为base64编码的p

    2024年02月15日
    浏览(32)
  • vue2 之 实现pdf电子签章

    仿照e签宝,实现pdf电子签章 = 拿到pdf链接,移动章的位置,获取章的坐标 技术 : 使用fabric + pdfjs-dist + vuedraggable 一位大佬的代码仓亏 : 地址 一位大佬写的文章 :地址 在大佬的代码基础上,进行了些许优化,变的更像e签宝 ps : 怕版本不同,导致无法运行,请下载指定版本

    2024年02月03日
    浏览(45)
  • vue - vue简单实现移动端的table表格

    vue实现移动端的table表格,效果图如下: 主要实现功能: 1,表头字段可以进行正序倒序排序功能; 2,可以展开收起; 3,蓝色这一行是合计数据 需要单独出来进行渲染,否则排序的时候此行会排乱掉; 用到的模拟数据会放到最后面; 4,注意表头数据thList,title是标题,

    2024年02月16日
    浏览(43)
  • 纯vue 获取usb串口,实现电子秤的对接

    说明:解决生产上过秤重量手动输入出错问题 效果图:  一:代码部分         1、创建一个名字为seriaport.js文件(随便定义,为下面页面引入使用)                  2、创建一个为usb.json 文件(随便定义,为下面页面引入使用)         文件过大,下载地址(因为大

    2024年02月07日
    浏览(38)
  • 记录-Vue移动端日历设计与实现

    选择月份和选择年份与日期做了条件渲染,切换方式是点击顶部时间切换选项 日数据的显示一共42条数据,先获取当前月的总天数,将每个月的天数保存在一个数组里,然后根据传入的参数返回相应的天数, 因为有闰年的存在,2月会是29天,所以做了闰年的判断.然后获取每周的第一天

    2023年04月26日
    浏览(35)
  • vue3移动端实现pdf预览

    使用的插件有: html部分: js部分: 我一开始使用的时第一种方法,然后测试之后发现 苹果手机会显示pdf加载出错了 ,安卓手机可以正常显示,于是换成了第二种方法。 html部分: js部分: 用了第二种插件后,苹果手机还是加载不出来,后面查到因为pdfjs-dist有时候会出现部

    2024年02月02日
    浏览(53)
  • vue实现鼠标拖拽div左右移动的功能

    直接代码: 这部分区域可以鼠标拖拽左右滚动

    2024年02月03日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包