手写签名 生成图片 php,jSignature 在网页上手写签名的插件(html5手写签名)

【实例简介】

jSignature 在网页上手写签名的插件(html5手写签名)

在IE7~IE8这种不支持HTML5的浏览器上,是利用Flash嵌入的方式实现的签名处理,在支持的HTML5的浏览器上默认采用canvas标签处理签名,可以生成 PNG格式、SVG格式的签名图片。非常适合在IPAD等移动客户端上实现手写签名的,该插件基于JQuery

【实例截图】

【核心代码】

jSignature-master

└── jSignature-master

├── examples

│   ├── index.html

│   ├── noconflict.html

│   └── unmini.html

├── extras

│   ├── SignatureDataConversion_dotNet

│   │   ├── core

│   │   │   ├── converter_alphanum_base30.cs

│   │   │   ├── converter_toSVG.cs

│   │   │   ├── imagingtools_Stats.cs

│   │   │   ├── Properties

│   │   │   │   └── AssemblyInfo.cs

│   │   │   └── SignatureDataConversionCore.csproj

│   │   ├── SignatureDataConversion_Debug.nunit

│   │   ├── SignatureDataConversion.sln

│   │   └── tests

│   │   ├── common_base_for_tests.cs

│   │   ├── converter_alphanum_base30_TESTS.cs

│   │   ├── converter_toSVG_TESTS.cs

│   │   ├── imagetools_Stats_TESTS.cs

│   │   ├── Properties

│   │   │   └── AssemblyInfo.cs

│   │   ├── samples

│   │   │   ├── reference_svg_nonsmoothed.svg

│   │   │   └── reference_svg_smoothed.svg

│   │   └── SignatureDataConversionTests.csproj

│   └── SignatureDataConversion_PHP

│   ├── core

│   │   ├── jSignature_Tools_Base30.php

│   │   └── jSignature_Tools_SVG.php

│   └── tests

│   ├── test_jSignature_Tools.php

│   ├── test.png

│   └── test.svg

├── libs

│   ├── flashcanvas.js

│   ├── flashcanvas.swf

│   ├── jquery.js

│   ├── jSignature.min.js

│   ├── jSignature.min.noconflict.js

│   └── modernizr.js

├── README.md

├── src

│   ├── jSignature.js

│   └── plugins

│   ├── jSignature.CompressorBase30.js

│   ├── jSignature.CompressorSVG.js

│   ├── jSignature.UndoButton.js

│   └── signhere

│   ├── jSignature.SignHere.js

│   └── signhere.svg

├── test

│   ├── index.html

│   ├── libs

│   │   ├── qunit.css

│   │   └── qunit.js

│   └── tests.js

└── wscript.py

18 directories, 41 files

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现手写签名生成图片的功能,可以使用 HTML5 提供的 Canvas 元素和 JavaScript 来完成。以下是一个简单的实现示例: 1. 在 HTML 中添加一个 Canvas 元素和一个保存图片的按钮: ``` <canvas id="signature-canvas" width="400" height="200"></canvas> <button onclick="saveSignature()">保存签名</button> ``` 2. 在 JavaScript 中编写绘制签名的逻辑: ``` var canvas = document.getElementById('signature-canvas'); var ctx = canvas.getContext('2d'); var isDrawing = false; var lastX = 0; var lastY = 0; canvas.addEventListener('mousedown', function(e) { isDrawing = true; lastX = e.clientX - canvas.offsetLeft; lastY = e.clientY - canvas.offsetTop; }); canvas.addEventListener('mousemove', function(e) { if (isDrawing) { var x = e.clientX - canvas.offsetLeft; var y = e.clientY - canvas.offsetTop; ctx.beginPath(); ctx.moveTo(lastX, lastY); ctx.lineTo(x, y); ctx.stroke(); lastX = x; lastY = y; } }); canvas.addEventListener('mouseup', function() { isDrawing = false; }); function saveSignature() { var dataURL = canvas.toDataURL(); var img = document.createElement('img'); img.src = dataURL; document.body.appendChild(img); } ``` 上述代码中,我们先获取了 Canvas 元素和它的 2D 上下文。接着,我们通过监听鼠标事件来实现签名的绘制,当鼠标按下时,我们设置 isDrawing 为 true,表示正在绘制;当鼠标移动时,我们根据当前的坐标和上一个坐标,用 drawLine 函数绘制一条线段;当鼠标松开时,我们将 isDrawing 设置为 false,停止绘制。 最后,我们编写了一个 saveSignature 函数,在用户点击保存按钮时,将 Canvas 上的内容转换为 base64 编码的图片,并创建一个 img 元素将其展示在页面上。 需要注意的是,上述代码只是一个简单的实现示例,实际应用中还需要对用户输入进行校验和优化,例如限制用户只能在指定的区域内签名,清除签名等。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值