表单提交使用 SVG 捕获的签名

Posted 2023-03-05

【中文标题】表单提交使用 SVG 捕获的签名

【英文标题】：Form submit a signature captured using SVG

【发布时间】：2011-11-23 05:53:38

【问题描述】：

我在这里遇到了@heycam 捕获的 SVG 签名示例：

Capture Signature using html5 and iPad 示例：http://mcc.id.au/2010/signature.html

比我之前见过的任何示例都简单得多，并且可以与鼠标和触摸一起使用！

但是我如何将结果作为表单的一部分提交？

我想我希望它作为 base64 字符串提交，但我对其他选项持开放态度...

对于奖励积分...有什么方法可以从提交的数据中去除黄色背景和线条？

谢谢！

【问题讨论】：

我是 base64 的粉丝，我没有看到更好的解决方案...

输出路径中不包含黄色背景和虚线，它们是包含的signature.svg的元素。签名路径存储在 svg 元素 <path id='p'> 的 d 属性中。加载页面后，打开 Firebug 并折叠打开 SVG 元素。绘制一个签名，你会看到 d 属性被填充。

【参考方案1】：

@heycam 的基于 SVG 的 sig capture hack 在技术上很棒，如果浏览器对 SVG 的有限支持不会吓到你，无论如何，调用 iframe，提取源并将其作为文本推送到服务器端：

var strokes = window.frames[0].getSignature()

获取字符串行：

"M182,46 M141,30 L136,34 L136,36 L134,40 L134,47 L135,52 L146,64"

像这样将它推入 SVG 模板：

var svgstring = '<svg xmlns="http://www.w3.org/2000/svg"  >' +
    '<path stroke="navy" stroke- fill="none" d='+ strokes +'/></svg>'

并在隐藏的输入字段中将其推送到服务器。

但是，有一个更简单的方法：

http://willowsystems.github.com/jSignature/

它适用于几乎所有浏览器（移动和桌面），并且可以导出漂亮、去噪、平滑的曲线 SVG。

【参考方案2】：

如果你看他的代码，你可以看到他是如何将签名提取到 div 标签中的。

内联 SVG 中有一个脚本，可在触发事件时将内容记录到“signaturePath”变量中。然后，他在 iframe 中调用“getSignature”以返回路径。为了提取路径，提交表单时，您需要调用该函数并创建一个隐藏的输入标记，该标记具有返回的路径值。您将在服务器端提取提交的值（即路径）。您可以稍后使用保存的路径（不会有黄色背景）重新创建 SVG。