【vue/uniapp】使用 smooth-signature 实现 h5 的横屏电子签名

通过github链接进行下载,然后代码参考如下,功能包含了清空、判断签名内容是否为空、生成png/jpg图片等。

签名效果:
请添加图片描述
预览效果:
请添加图片描述
下载 smooth-signature 链接:https://github.com/linjc/smooth-signature

代码参考:

<template>
	<div>
	    <div class="btn">
	        <button class="item" @click="submit">确定</button>
	        <button class="item" @click="clear">清空</button>
	    </div>
	    <canvas />
	    <u-toast ref="uToast" />
	</div>
</template>

<script>
import SmoothSignature from "smooth-signature";
export default {
	name: "handWriteSign",
	data() {
	    return {
	        canvas: '',
	        options: {},
	        signature: ''
	    }
	},
	mounted() {
	    this.initSignature()
	},
	methods: {
	    initSignature() {
	        // 初始化
	        this.canvas = document.querySelector("canvas");
	        // 配置项
	        this.options = {
	            // 画布在页面实际渲染的宽度、高度
	            width: window.innerWidth,
	            height: window.innerHeight - 100,
	            // 画布缩放
	            scale: 2,
	            minWidth: 4,
	            maxWidth: 10,
	            color: '#000',
	            bgColor: '#fff'
	        };
	        this.signature = new SmoothSignature(this.canvas, this.options)
	    },
	    clear() {
	        this.signature.clear()
	    },
	    submit() {
	        // 判断签名内容是否为空
	        const isEmpty = this.signature.isEmpty();
	        if (isEmpty) {
	            return this.$refs.uToast.show({
	                title: '内容为空,请签名',
	                type: 'error'
	            })
	        }
	        // 生成旋转后的新画布 -90/90/-180/180
	        const canvas1 = this.signature.getRotateCanvas(-90)
	        const pngUrl = canvas1.toDataURL()
	        // let signPic = this.signature.getPNG()
	        console.log('signPic', pngUrl);
	        uni.setStorageSync('signPic', pngUrl)
	        if (pngUrl) {
	            uni.navigateBack({
	                delta: 1, // 返回的页面数,如果是1表示返回上一级
	            });
	        }
	    },
	},
};
</script>

<style lang="scss">
	.btn {
	    display: flex;
	    align-items: center;
	    height: 80px;
	    .item {
	        transform: rotate(90deg);
	        border-radius: 8px;
	        border: 1px solid #f0f0f0;
	    }
	}
</style>

然后在要展示签名的页面:

// 每次进入页面时执行
onShow() {
    this.img1 = uni.getStorageSync('signPic')
},
<image :src="img1" style="width: 100%;" mode="widthFix"></image>

补充一下,最后我还遇到了一个问题,在 canvas 画布里莫名地生还成了一个div,这样导致了在这个 div 区域,手写的笔迹有时候会写不上,是个偶然的现象,但是写不上的时候真的很讨厌
请添加图片描述
去也去不掉,后来直接在组件样式里加了:

::v-deep div {
    display: none !important;
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

流程图步骤条

1.结构 <ul class"stepUl"> <li class"stepLi" v-for"(item, index) in stepList" :key"index"> <div class"top"> <p :class"{active: currentState > item.key}">{{ item.value }}…

ROS机器人未知环境自主探索功能包explore_lite最全源码详细解析(五)

本系列文章主要针对ROS机器人常使用的未知环境自主探索功能包explore_lite展开全源码的详细解析&#xff0c;并进行概括总结。 本系列文章共包含六篇文章&#xff0c;前五篇文章主要介绍explore_lite功能包中 explore.cpp、costmap_tools.h、frontier_search.cpp、costmap_clie…

Canal--->准备MySql主数据库---->安装canal

一、安装主数据库 1.在服务器新建文件夹 mysql/data&#xff0c;新建文件 mysql/conf.d/my.cnf 其中my.cnf 内容如下 [mysqld] log_timestampsSYSTEM default-time-zone8:00 server-id1 log-binmysql-bin binlog-do-db mall # 要监听的库 binlog_formatROW2.启动数据库 do…

汽车4S行业的信息化特点与BI建设挑战

汽车行业也是一个非常大的行业&#xff0c;上下游非常广&#xff0c;像主机厂&#xff0c;上游的零配件&#xff0c;下游的汽车流通&#xff0c;汽车流通之后的汽车后市场&#xff0c;整个链条比较长。今天主要讲的是汽车流通&#xff0c;汽车4S集团。一个汽车4S集团下面授权代…

【CSS】利用Vue实现数字翻滚动画效果

利用Vue实现数字翻滚动画效果 在很多数据可视化的需求中&#xff0c;动态呈现数据变化是一个常见且具有较强视觉冲击力的手段&#xff0c;尤其是数字的实时变化。今天我们将探讨如何使用 Vue.js 和 CSS3 来实现数字的翻滚动画效果&#xff0c;即模拟真实物体在Z轴上翻动的效果…

python使用uiautomator2操作雷电模拟器9并遇到解决adb 连接emulator-5554 unauthorized问题

之前写过一篇文章 python使用uiautomator2操作雷电模拟器_uiautomator2 雷电模拟器-CSDN博客 上面这篇文章用的是雷电模拟器4&#xff0c;雷电模拟器4.0.78&#xff0c;android版本7.1.2。 今天有空&#xff0c;再使用雷电模拟器9&#xff0c;android版本9来测试一下 uiauto…

利用Flexbox和Margin实现智能布局:如何巧妙分配剩余空间,让你的网页设计更上一层楼?

1、演示 2、flex布局 Flex布局是一种用于Web开发的弹性盒子布局模型&#xff0c;它可以让容器内的子元素在空间分配、对齐和排列方面具有更大的灵活性。以下是Flex布局的基本用法&#xff1a; 容器属性&#xff1a; display: flex;&#xff1a;将容器指定为Flex布局。flex-dire…

头歌-机器学习 第9次实验 随机森林

第1关&#xff1a;Bagging 任务描述 本关任务&#xff1a;补充 python 代码&#xff0c;完成 BaggingClassifier 类中的 fit 和 predict 函数。请不要修改 Begin-End 段之外的代码。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a; 什么是 Bagging&#xf…

【IC前端虚拟项目】验证阶段开篇与知识预储备

【IC前端虚拟项目】数据搬运指令处理模块前端实现虚拟项目说明-CSDN博客 从这篇开始进入验证阶段&#xff0c;因为很多转方向的小伙伴是转入芯片验证工程师方向的&#xff0c;所以有必要先做一个知识预储备的说明&#xff0c;或者作为验证入门的一个小指导吧。 在最开始&#…

C++11 设计模式1. 模板方法(Template Method)模式学习。UML图

一 什么是 "模板方法&#xff08;Template Method&#xff09;模式" 在固定步骤确定的情况下&#xff0c;通过多态机制在多个子类中对每个步骤的细节进行差异化实现&#xff0c;这就是模板方法模式能够达到的效果。 模板方法模式属于&#xff1a;行为型模式。 二 &…

vivado 调试核时钟设置指南

调试核时钟设置指南 注释 &#xff1a; 以下章节适用于 7 系列、 UltraScale 和 UltraScale 器件。 Versal 调试核使用基于 AXI 的连接 &#xff0c; 且不受本章中的 时钟设置指南的约束。 Vivado 硬件管理器使用 JTAG 接口来与 Vivado Debug Hub 核进行通信 &#…

Spring Boot统一功能处理之拦截器

本篇主要介绍Spring Boot的统一功能处理中的拦截器。 目录 一、拦截器的基本使用 二、拦截器实操 三、浅尝源码 初始化DispatcherServerlet 处理请求&#xff08;doDispatch) 四、适配器模式 一、拦截器的基本使用 在一般的学校或者社区门口&#xff0c;通常会安排几个…

Linux查看系统配置信息的命令【lscpu】【free】【df】【uname】【lsblk】【top】

目录 1.查看CPU信息【lscpu】 2.查看内存信息【free】 3.查看文件系统信息【df】 4.查看系统信息【uname】 知识扩展&#xff1a;Red Hat Enterprise Linux 和 Debian GNU/Linux 两者的发展介绍 知识扩展&#xff1a;Centos 和 ubuntu的区别 知识扩展&#xff1a;更多 …

Navicat的详细下载步骤

第一步&#xff0c;打开百度&#xff0c;找到Navicat官网 第二步&#xff0c;点击产品然后进去 第三步&#xff0c;点击直接下载然后跟着步骤来就OK啦

idm线程越多越好吗 idm线程数多少合适 IDM百度云下载 IDM下载器如何修改线程数

IDM&#xff08;Internet Download Manager&#xff09;是一款流行的网络下载器&#xff0c;它支持多线程下载&#xff0c;这意味着它可以同时建立多个连接来下载文件的不同部分&#xff0c;从而提高下载速度。我们在使用IDM的时候总是有很多疑问&#xff0c;今天我们学习IDM线…

免费搭建MC服务器(Minecraft免费开服教程)

我的世界(MC)作为一款全球热门的沙盒游戏&#xff0c;以其独特的创造性和无限的想象力&#xff0c;吸引了无数玩家。自行搭建MC服务器能够获得更好的游戏体验&#xff0c;本文将为大家介绍如何免费搭建MC服务器&#xff0c;开启一段属于自己的游戏世界之旅。 搭建MC服务器我们需…

ES11-12

1-ES11-Promise.allSettled Promise.allSettled0)方法返回一个在所有给定的promise都已经fulfilled或rejected后的promise,并带有一个对象数组,每个对象表示对应的promise结果。 简单来说不管成功失败都会调用.then()&#xff0c;然后处理成功和失败的结果 const promises [ …

头歌机器学习实验 第7次实验 局部加权线性回归

任务描述 本关任务&#xff1a;编写一个利用局部加权计算回归系数的小程序。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a;1.局部加权算法的思想&#xff1b;2.局部加权的核心算法。 局部加权算法的思想 在局部加权算法中 &#xff0c;我们给待预测点附近…

数字社交的新典范:解析Facebook的成功密码

在当今数字化时代&#xff0c;社交媒体已经成为人们日常生活的重要组成部分&#xff0c;而Facebook作为最知名的社交媒体平台之一&#xff0c;其成功之处备受瞩目。本文将深入解析Facebook的成功密码&#xff0c;探讨其在数字社交领域的新典范。 1. 用户体验的优化 Facebook注…

SpringBoot删除菜品模块开发(SpringMVC分割参数、事务管理、异常处理、批量删除)

需求分析与设计 一&#xff1a;产品原型 在菜品列表页面&#xff0c;每个菜品后面对应的操作分别为修改、删除、停售&#xff0c;可通过删除功能完成对菜品及相关的数据进行删除。 删除菜品原型&#xff1a; 业务规则&#xff1a; 可以一次删除一个菜品&#xff0c;也可以批…