Html 使用 HTML5 和 iPad 捕获签名

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3096470/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 03:33:49  来源:igfitidea点击:

Capture Signature using HTML5 and iPad

ipadhtmlcanvassvg

提问by Mark Richman

Anyone know how this can be done? Would you use a canvas object, svg, jQuery, etc?

有谁知道如何做到这一点?你会使用画布对象、svg、jQuery 等吗?

回答by szimek

Here's another canvas based version with variable width (based on drawing velocity) curves: demo at http://szimek.github.io/signature_padand code at https://github.com/szimek/signature_pad.

这是另一个具有可变宽度(基于绘图速度)曲线的基于画布的版本:http://szimek.github.io/signature_pad 上的演示和https://github.com/szimek/signature_pad 上的代码。

signature sample

签名样本

回答by Ben S

A canvas element with some JavaScript would work great.

带有一些 JavaScript 的画布元素会很好用。

In fact, Signature Pad(a jQuery plugin) already has this implemented.

事实上,Signature Pad(一个jQuery插件)已经实现了这一点。

回答by heycam

Here is a quickly hacked up version of this using SVGI just did. Works well for me on my iPhone. Also works in a desktop browser using normal mouse events.

这是我刚刚使用 SVG 快速修改的版本。在我的 iPhone 上对我来说效果很好。也适用于使用普通鼠标事件的桌面浏览器。

回答by ddotsenko

Perhaps the best two browser techs for this are Canvas, with Flash as a back up.

也许最好的两种浏览器技术是 Canvas,Flash 作为备份。

We tried VML on IE as backup for Canvas, but it was much slower than Flash. SVG was slower then all the rest.

我们在 IE 上尝试使用 VML 作为 Canvas 的备份,但它比 Flash 慢得多。SVG 比其他的都慢。

With jSignature ( http://willowsystems.github.com/jSignature/) we used Canvas as primary, with fallback to Flash-based Canvas emulator (FlashCanvas) for IE8 and less. Id' say worked very well for us.

使用 jSignature ( http://willowsystems.github.com/jSignature/),我们使用 Canvas 作为主要的,并回退到 IE8 及更低版本的基于 Flash 的 Canvas 模拟器 (FlashCanvas)。我说对我们来说效果很好。

回答by Luigi D'Amico

The options already listed are very good, however here a few more on this topic that I've researched and came across.

1) http://perfectionkills.com/exploring-canvas-drawing-techniques/
2) http://mcc.id.au/2010/signature.html
3) https://zipso.net/a-simple-touchscreen-sketchpad-using-javascript-and-html5/

And as always you may want to save the canvas to image:
http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

good luck and happy signing

已经列出的选项非常好,但是这里还有一些我研究并遇到的关于这个主题的内容。

1) http://perfectkills.com/exploring-canvas-drawing-techniques/
2) http://mcc.id.au/2010/signature.html
3) https://zipso.net/a-simple-touchscreen -sketchpad-using-javascript-and-html5/

和往常一样,您可能希望将画布保存为图像:
http: //www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

祝你好运,签约愉快

回答by cchantep

Another OpenSource signature field is https://github.com/applicius/jquery.signfield/, registered jQuery plugin using Sketch.js .

另一个开源签名字段是https://github.com/applicius/jquery.signfield/,使用 Sketch.js 注册的 jQuery 插件。