JSsignature_pad 无纸化电子签名(复制粘贴直接用)

最新推荐文章于 2024-03-08 10:25:44 发布
最新推荐文章于 2024-03-08 10:25:44 发布
阅读量8.3k 收藏 11
点赞数 1
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38362455/article/details/88171200
版权

官网JSsignature_pad
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<title>无纸化签名</title>
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="yes" name="apple-touch-fullscreen">
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script src = "https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js "> </script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/example/css/signature-pad.css">
</head>
<body>
	<div id="signature-pad" class="signature-pad">
		<div class="description tc">签名区域</div>
		<div class="signature-pad--body">
			<canvas id="signature-canvas"></canvas>
			<i class="leftup lefta"></i>
			<i class="leftup rightup"></i>
			<i class="leftup leftdown"></i>
			<i class="leftup rightdown"></i>
		</div>
		<div class="signature-pad--footer">
			<button type="button" class="buttonclear clear" id="clear" data-action="clear">重签</button>
			<button type="button" class="buttonclear clear" id="save" data-action="clear">确定</button>
		</div>
	</div>
</body>
<script type="text/javaScript">
	var canvas = document.getElementById('signature-canvas');
	var signaturePad = new SignaturePad(canvas, { backgroundColor: '#DEDEDE', penColor: 'rgb(0, 0, 0)' });
	var saveButton = document.getElementById('save');
	var cancelButton = document.getElementById('clear');
	saveButton.addEventListener('click', function (event) {
		// 签名为空的判断
		if(signaturePad.isEmpty()){
			alert("不能为空")
		}
		// signaturePad.jSignature('getData');
		var imgStr = signaturePad.toDataURL('image/png');
		//获取到image的base64 可以把这个传到后台解析成图片
		//imgStr = data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfgAAAL2CAYAAA......
		//去掉data:image/png;base64,我们只要后面的部分iVBORw0KGgoAAAANSUhEUgAAAfgAAAL2CAYAAA......
		imgStr=imgStr.substring(22,imgStr.length);
		$.ajax({
			type: "POST",
			url: "",
			data:{
				imgStr:imgStr
			},
			dataType:"json",
			success: function(data){

			}
		});

	});
	cancelButton.addEventListener('click', function (event) {
		signaturePad.clear();
	});
	function resizeCanvas() {
		var ratio = Math.max(window.devicePixelRatio || 1, 1); // 清除画布
		canvas.width = canvas.offsetWidth * ratio;
		canvas.height = canvas.offsetHeight * ratio;
		canvas.getContext("2d").scale(ratio, ratio);
		signaturePad.clear();
	}
	window.onresize = resizeCanvas;
	resizeCanvas();

</script>
</html>

方法：

方法名称使用方法说明
clear.jSignature("clear")清空并重置画布
getData.jSignature("getData", "base30")将画布转换为base64编码的数据字符串，可以在表单发布或提交时将其保存为任何数据库中的字符串
importData.jSignature("importData",dataurl)使用从上述getData方法提取的数据URL更新现有的jSignature画布

 选项参数：

参数名称说明默认值
width定义画布的宽度。 没有％或px的数值（新版是可以使用百分比和px后缀的）250
height定义画布的高度。 没有％或px的数值（新版是可以使用百分比和px后缀的）150
color定义画布上笔画的颜色。 接受任何颜色十六进制值#000
background-color定义画布的背景颜色。 接受任何颜色十六进制值#fff
lineWidth定义线的厚度。 接受任何正数值（也是默认画布的横线的画笔的宽度）1
cssclass定义画布的自定义css类None
小贼驴
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HandwritingBoard:基于signature_pad.js的uni-app实现手写签名板
04-21
HandwritingBoard 基于signature_pad.js的uni-app实现手写签名板
【签名】点击按钮弹出签名框,保存成图片,并显示出来
二手程序员
01-18 1578
js实现点击按钮弹出签名框(不一定在最下面弹出！)使用app.js和signature_pad.js生成签名框和保存成图片，此处都是在body的最底部生成img标签：function download2(dataURL, filename) { // var blob = dataURLToBlob(dataURL); // var url = window.URL.createObjec
vue2中signature_pad签名组件
sinat_42262603的博客
03-08 386
在项目中下载安装npm install signature_pad。
vue-signature-pad在vue中实现电子签名
m0_56175362的博客
11-18 3422
首页需要下载依赖包 npm install --save vue-signature-pad 这里使用的是全局引用组件在main.js中 import Vue from "vue"; <--引入--> import VueSignaturePad from "vue-signature-pad"; <--注册组件-> Vue.use(VueSignaturePad); 在页面中使用组件 <vue-signature-pad id="signature" width=
小程序：签名功能
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
08-23 352
核心还是用了这个库 https://github.com/szimek/signature_pad html index.wxml 回显 <view wx:if="{{signatureUrl}}"> <image src="{{signatureUrl}}" class="preview"></image> </view> 画板 <view class="signature"> <canvas class="signature__pa
vue中使用vue-signature-pad实现电子签名的效果：包含撤销、清屏、笔刷,橡皮擦，可调节笔刷的大小，保存功能
weixin_60901596的博客
01-23 828
此插件还有两个内置的方法比较有用，就是 “锁定目标签名板” 和“打开目标签名板。
Blazor组件自做四 : 使用JS隔离封装signature_pad签名组件
alex_zoucn的博客
04-01 923
运行截图 演示地址: 响应式: 感谢szimek写的棒棒的signature_pad.js项目, 来源: https://github.com/szimek/signature_pad 正式开始 1. 在文件夹wwwroot/lib,添加signature_pad子文件夹,里面下载库文件(文件文末源码里可复制) signature_pad.umd.js复制到此文件夹. 最终版本参考如下 +signature_pad |-signature_pad.umd.js 2. 添加app.js文件 +sign
移动端，h5签名功能---Signature Pad + blueimp-canvas-to-blob
weixin_45439379的博客
11-17 891
移动端，h5签名功能---Signature Pad + blueimp-canvas-to-blobSignature Padblueimp-canvas-to-blob项目场景：问题描述：使用步骤： Signature Pad 解决移动端，web端canvas兼容问题。 git机票: Signature Pad. blueimp-canvas-to-blob 解决canvas（base64）图片转化为二进制流在移动端各种机型上的兼容问题。 git机票: blueimp-canvas-to-blob. 项
微信小程序手写板电子签名实现
zouxiaohu2020的博客
01-19 2681
参考github高星(截止文章发布时6.7k)项目:https://github.com/szimek/signature_pad 当前signature_pad版本：v3.0.0-beta.3 这是一个现改signature_pad为微信小程序使用方法的示例，如果signature_pad版本更新或者小程序版本更新导致无法正常使用，可以下方留言告诉我，看到后会第一时间进行修改。 1、wxml <view style="height: 300rpx"> <canvas type=.
signature pad java_signature_pad
weixin_39831001的博客
02-23 147
Library for drawing smooth signatures.Signature Pad Signature Pad is a JavaScript library for drawing smooth signatures. It's HTML5 canvas based and uses variable width Bézier curve interpolation ba...
signature_pad：基于HTML5画布的平滑签名绘制
02-03
签名板 Signature Pad是一个JavaScript库，用于绘制平滑的签名。 它基于HTML5画布，并基于提供的使用可变宽度的Bézier曲线插值。 它适用于所有现代台式机和移动浏览器，并且不依赖于任何外部库。 演示版 可在台式机和移动浏览器中运行。 您可以查看其以获取有关如何处理窗口调整大小和高DPI屏幕的一些技巧。 您还可以在找到有关后者的更多信息。 其他演示 擦除功能： : 撤消功能： : 安装 您可以使用npm安装最新版本： npm install --save signature_pad 或纱线： yarn add signature_pad 您还可以使用[removed]标签将其直接添加到页面中： < script src =" https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js " > </ script > 您可以在选择其他版本。 该库以UMD（通用模块定义）和ES6模块的形式提供。 用法 API var canvas = document
H5电子签名--jSignature插件
12-02
H5前端的电子签名，简单明了，使用MUI框架和JQuery的jSignature插件
使用SignaturePad 实现的H5电子签名。
04-18
使用SignaturePad 实现的H5电子签名。 可以设置画布，笔尖的大小颜色， 清空数据，保存数据等等
HTML5画布Signature_Pad.zip
07-16
Signature_Pad 采用原生JS编写，基于 HTML 5 画布。用 Bézier 曲线进行插补，使线条更平滑。它适用于所有现代桌面和移动浏览器，不依赖于任何外部库。安装bower 安装bower install signature_pad直接下载 signature_pad.js 或者 signature_pad.min.js 使用APIvar canvas = document.querySelector("canvas"); var signaturePad = new SignaturePad(canvas); // Returns signature image as data URL (see https://mdn.io/todataurl for the list of possible paramters) signaturePad.toDataURL(); // save image as PNG signaturePad.toDataURL("image/jpeg"); // save image as JPEG // Draws signature image from data URL signaturePad.fromDataURL("data:image/png;base64,iVBORw0K..."); // Clears the canvas signaturePad.clear(); // Returns true if canvas is empty, otherwise returns false signaturePad.isEmpty(); // Unbinds all event handlers signaturePad.off(); // Rebinds all event handlers signaturePad.on(); 标签：Signature
签名插件SignaturePad.zip
07-16
Signature Pad jQuery 插件可以将 HTML 格式转换为 Signature Pad。Signature Pad 有两个模式：TypeIt 和 DrawIt。在 TypeIt 模式下，用户的签名自动生成为 HTML 文本。在 DrawIt 模式下，用户可以在 canvas 上书写他们的签名。 标签：Signature
flutter_signature_pad:Flutter小部件，允许用户用手指签名并将结果导出为图像数据
05-18
Flutter小部件，允许用户用手指签名并将结果导出为图像。 小部件入门 这是一个非常简单的窗口小部件，它允许用手指在窗口小部件上绘图并能够将图像取回。 对于非常基本的用法，请在检查示例文件 Signature ( ...
php str_pad 函数使用详解
10-30
今天一朋友问我str_pad()的使用方法.他说网上很多都是直接把手册上的拿过来.于是我来写详细点.str_pad()函数的作用是：用一个字符串填充另一个指定字符串到指定长度。
xen-acpi-pad.rar_acpi_pad_acpi_pad是什么
09-21
xen-acpi-pad.c - Xen pad interface.
Java-GUI介绍和使用
最新发布
04-18
GUI API包含的类分为三个部分:组件类(component class) 容器类(container class),和辅助类(helper class) 1. 组件类是用来创建用户图形界面的,例如JButton,JLabel,JTextField. 2. 容器类是用来包含其他组件的,例如JFrame,JPanel 3. 辅助类是用来支持GUI组件的,例如Color,Font
ap_uint<8> * image_pad_in_pad_burst_ptr;
07-22
`ap_uint<8> * image_pad_in_pad_burst_ptr` 是一个指针变量，用于指向图像数据的内存位置。 `ap_uint<8>` 表示一个8位的无符号整数类型，`*` 表示这是一个指针变量。在这个上下文中，`image_pad_in_pad_burst_ptr` 是一个指向 `ap_uint<8>` 类型数据的指针。 在函数中，`image_pad_in_pad_burst_ptr` 被用来进行指针运算，以便访问图像数据的不同位置。通过对 `image_pad_in_pad_burst_ptr` 进行偏移和加法运算，可以定位到图像数据中特定的像素，并将其存储到图像缓冲区中。 请注意，这里没有给出 `image_pad_in_pad_burst_ptr` 的具体赋值操作，所以无法确定它指向哪个具体的内存位置。通常情况下，在函数调用时，会将正确的图像数据指针传递给 `image_pad_in_pad_burst_ptr`，以确保它指向正确的图像数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值