电子签名，手写板签名(js+layui+jSignature)

原创

已于 2023-08-08 15:23:35 修改 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #layui #前端框架 #javascript

于 2022-10-01 10:36:15 首次发布

本文介绍了一个基于HTML和JavaScript实现的电子签名系统。该系统允许用户调整笔迹的粗细和颜色，并提供了清除与保存签名的功能。同时，后端使用PHP处理签名数据并将其保存为图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>电子签名</title>i+
    <style>
        html,body{
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: #f2f2f2;
        }
        .main{
            width: 100%;
            height: 100%;
            position: relative;
        }
        #signature{
            width: 100%;
            height: 100%;
            background-color: #fff;
        }
        .header{
            width: 50px;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            font-size: 16px;
            background-color: #273039;
            color: #fff;
            text-align: center;
            border: none
        }

        .footer{
            width: 50px;
            height: 100%;
            background-color: #fff;
            position: absolute;
            top: 0;
            left: 0;
            border-right: 2px solid #f2f2f2
        }
        .size{
            position: absolute;
            top: 5%;
        }
        .size div{
            margin-top: 20px;
            border: 2px solid #f2f2f2;
            border-radius: 50%;

            text-align: center;
            background: #00a0e9
        }
        .size-one{
            width: 14px

最低0.47元/天解锁文章