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

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

1.使用smooth-signature

npm install --save smooth-signature

二.页面引入插件

import SmoothSignature from "smooth-signature";

三.实现效果

企业微信截图_16983060016752.png

企业微信截图_16983060187445.png

四.完整代码

<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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/120761.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LVS集群-DR模式

概念&#xff1a; LVS-DR模式&#xff0c;也是最常用的lVS负载方式&#xff0c;DR DIRECT ROUTING 直接路由模式 负载均衡器lVS调度器&#xff0c;只负责请求和转发到后端的真实服务器&#xff0c;但是影响结果&#xff0c;由后端服务器直接转发给客户端&#xff0c;不需要经…

2023年第四届MathorCup大数据竞赛(A题)|坑洼道路检测和识别|数学建模完整代码+建模过程全解全析

当大家面临着复杂的数学建模问题时&#xff0c;你是否曾经感到茫然无措&#xff1f;作为2021年美国大学生数学建模比赛的O奖得主&#xff0c;我为大家提供了一套优秀的解题思路&#xff0c;让你轻松应对各种难题。 希望这些想法对大家的做题有一定的启发和借鉴意义。 让我们来…

LLM系列 | 22 : Code Llama实战(下篇):本地部署、量化及GPT-4对比

引言 模型简介 依赖安装 模型inference 代码补全 4-bit版模型 代码填充 指令编码 Code Llama vs ChatGPT vs GPT4 小结 引言 青山隐隐水迢迢&#xff0c;秋尽江南草未凋。 小伙伴们好&#xff0c;我是《小窗幽记机器学习》的小编&#xff1a;卖热干面的小女孩。紧接…

微信小程序设计之主体文件app-ts/js

一、新建一个项目 首先&#xff0c;下载微信小程序开发工具&#xff0c;具体下载方式可以参考文章《微信小程序开发者工具下载》。 然后&#xff0c;注册小程序账号&#xff0c;具体注册方法&#xff0c;可以参考文章《微信小程序个人账号申请和配置详细教程》。 在得到了测…

iPhone开发--Xcode中的ld64和-ld_classic是什么意思

如下内容&#xff0c;翻译自官方论坛文档 文档地址如下&#xff1a; https://developer.apple.com/forums/thread/715385 关键内容摘抄如下&#xff1a; A static library is an archive of one or more object files. It has the extension .a. Use ar, libtool, and ranlib…

新的iLeakage攻击从Apple Safari窃取电子邮件和密码

图片 导语&#xff1a;学术研究人员开发出一种新的推测性侧信道攻击&#xff0c;名为iLeakage&#xff0c;可在所有最新的Apple设备上运行&#xff0c;并从Safari浏览器中提取敏感信息。 攻击概述 iLeakage是一种新型的推测性执行攻击&#xff0c;针对的是Apple Silicon CPU和…

Python中的文件操作和异常处理

在Python编程中&#xff0c;文件操作和异常处理是非常重要的概念。本文将介绍如何使用Python进行文件读写操作&#xff0c;并展示如何处理可能出现的错误和异常情况。 文件读写操作 Python提供了简单而强大的文件读写功能&#xff0c;让我们能够轻松地处理各种文件类型。下面…

【IT行业就业前景广阔:探讨热门方向与就业机会】

IT行业哪个方向比较好就业? IT行业是一个快速发展的领域&#xff0c;与许多其他行业紧密结合&#xff0c;为各个行业带来了巨大的变革和机遇。在这个充满活力的行业中&#xff0c;有许多就业方向可以选择。让我们一起来探讨一下IT行业的发展背景、就业方向以及分享一些就业经…

简单了解一下:NodeJS的WebSocket网络编程

NodeJS的webSocket网络编程。 那什么是WebSocket呢&#xff1f;WebSocket是HTML5提供的一种浏览器和服务器进行通信的网络技术。两者之间&#xff0c;只需要做一个握手动作&#xff0c;就可以在浏览器和服务器之间开启一条通道&#xff0c;就可以进行数据相互传输。 实现WebS…

c++的4中类型转换操作符(static_cast,reinterpret_cast,dynamic_cast,const_cast),RTTI

目录 引入 介绍 static_cast 介绍 使用 reinterpret_cast 介绍 使用 const_cast 介绍 使用 dynamic_cast 介绍 使用 RTTI(运行时确定类型) 介绍 typeid运算符 dynamic_cast运算符 type_info类 引入 原本在c中,我们就已经接触到了很多类型转换 -- 隐式类型转…

线程安全问题

线程安全 简单来说&#xff0c;在多个线程访问某个方法或者对象的时候&#xff0c;不管通过任何的方式调用以及线程如何去交替执行。在程序中不做任何同步干预操作的情况下&#xff0c;这个方法或者对象的执行/修改都能按照预期的结果来反馈&#xff0c;那么这个类就是线程安全…

YOLOv7优化:感受野注意力卷积运算(RFAConv),效果秒杀CBAM和CA等 | 即插即用系列

💡💡💡本文改进:感受野注意力卷积运算(RFAConv),解决卷积块注意力模块(CBAM)和协调注意力模块(CA)只关注空间特征,不能完全解决卷积核参数共享的问题 提供多种卷积变体供使用:CBAMConv,CAMConv,CAConv,RFAConv,RFCAConv RFAConv | 亲测在多个数据集能够实现…

刷题笔记day03-链表

前言 今天是刷题的第三天&#xff0c;坚持就是胜利 203.移除链表元素 增加一个头结点&#xff0c;这样可以统一删除操作 另外&#xff0c;遇到等于的值&#xff0c;就让 prev 指向 curr.Next &#xff0c;同时将curr更新指向 prev.Next。 /*** Definition for singly-linked…

buuctf_练[CISCN2019 华东南赛区]Web4

[CISCN2019 华东南赛区]Web4 文章目录 [CISCN2019 华东南赛区]Web4掌握知识解题思路代码分析正式解题 关键paylaod 掌握知识 ​ 根据url地址传参结构来判断php后端还是python后端&#xff1b;uuid.getnode()函数的了解&#xff0c;可以返回主机MAC地址十六进制&#xff1b;pyt…

Hive简介及核心概念

本专栏案例数据集链接: https://download.csdn.net/download/shangjg03/88478038 1.简介 Hive 是一个构建在 Hadoop 之上的数据仓库,它可以将结构化的数据文件映射成表,并提供类 SQL 查询功能,用于查询的 SQL 语句会被转化为 MapReduce 作业,然后提交到 Hadoop 上运行。 …

Golang 自定义函数库(个人笔记)

1.用字符串连接切片元素&#xff08;类似php implode&#xff09; package mainimport ("fmt""strconv""strings" )func main() {data : []int{104, 101, 108, 108, 111}fmt.Println(IntSliceToString(data, ",")) }func IntSliceToS…

汽车4S店如何在数字化管理下,提高市场竞争力

在所有人都认为疫情过后&#xff0c;经济形势会一路向阳&#xff0c;但是&#xff0c;实际情况出乎所有人的意料&#xff0c;各行各业举步维艰。 新闻爆出的各大房地产&#xff0c;恒大的2.4万亿让人瞠目结舌&#xff0c;还有碧桂园和融创&#xff0c;也是债台高筑了&#xff…

xml导出pdf简单实现

1. 引入依赖 <dependency><groupId>com.itextpdf</groupId><artifactId>itext7-core</artifactId><version>8.0.1</version> </dependency>2. 代码实现 import com.itextpdf.kernel.geom.PageSize; import com.itextpdf.ker…

ESP32网络开发实例-HTTP-GET请求

HTTP-GET请求 文章目录 HTTP-GET请求1、HTTP GET请求2、软件准备3、硬件准备4、代码实现4.1 向OpenWeatherMap请求天气数据4.2 ThingSpeak 中的 ESP32 HTTP GET(更新值)在本文中,我们将介绍如使用ESP32向 ThingSpeak 和 openweathermap.org 等常用 API 发出 HTTP GET 请求。…

ToLua使用原生C#List和Dictionary

ToLua是使用原生C#List 介绍Lua中使用原生ListC#调用luaLua中操作打印测试如下 Lua中使用原生DictionaryC#调用luaLua中操作打印测试如下 介绍 当你用ToLua时C#和Lua之间肯定是会互相调用的&#xff0c;那么lua里面使用List和Dictionary肯定是必然的&#xff0c;在C#中可以调用…