canvas手写签名

最新推荐文章于 2024-07-22 10:07:33 发布

Elvan_lz

最新推荐文章于 2024-07-22 10:07:33 发布

阅读量805

点赞数 1

分类专栏： js canvas 手写签名文章标签： canvas手写签名 js canvas

本文链接：https://blog.csdn.net/Elvan_lz/article/details/73196498

版权

本文介绍如何在后台仓库管理系统中实现手写签名功能，满足客户在触摸屏上进行签名确认的需求。通过js和canvas技术，实现了手写签名插件，并在保存时将签名转换为base64图片，便于后台存储。

摘要由CSDN通过智能技术生成

前段时间有个项目，是一个后台仓库管理系统，客户要求出入仓审核的时候需要手写签名确认，所以就写了一个手写签名的插件

因为客户的系统是通过触摸屏操作的，所以也写了 touch 事件以达到客户的要求。

具体代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes"/>
		<title>手写签名</title>
		<style type="text/css">
			html,body{
				margin: 0;
				padding: 0;
			}
			.saveimg{
				text-align: center;
			}
			.saveimgs span{
				display: inline-block;
				margin-top:5px;
			}
		</style>
	</head>
	<body>
		
		<div align="center">
		    <canvas id="myCanvas" width="500" height="300" style="border:1px solid #6699cc"></canvas>
		    <div class="control-ops control">
			    <button type="button" class="btn btn-primary" onclick="javascript:clearArea();return false;">清空画板</button>
			    Line width : <select id="selWidth" onchange="aaa()">
			        <option value="1">1</option>
			        <option valu