web-dev-qa-db-ja.com

HTML5とiPadを使用して署名をキャプチャする

誰もがこれをどのように行うことができるか知っていますか?キャンバスオブジェクト、svg、jQueryなどを使用しますか?

149
Mark Richman

可変幅(描画速度に基づく)曲線を使用した別のキャンバスベースのバージョン: http://szimek.github.io/signature_pad のデモと https://github.comのコード/ szimek/signature_pad

signature sample

291
szimek

いくつかのJavaScriptを備えたキャンバス要素は、うまく機能します。

実際、 署名パッド (jQueryプラグイン)にはすでにこれが実装されています。

58
Ben S

ここに SVGを使用したこのハッキングされたバージョン しただけです。私のiPhoneでうまく機能します。また、通常のマウスイベントを使用してデスクトップブラウザーで動作します。

15
heycam

おそらく、このための最高の2つのブラウザー技術はCanvasであり、Flashがバックアップです。

CanvasのバックアップとしてIEでVMLを試しましたが、Flashよりもはるかに低速でした。 SVGは他のすべてよりも低速でした。

JSignature( http://willowsystems.github.com/jSignature/ )では、Canvasをプライマリとして使用し、IE8以下ではFlashベースのCanvasエミュレーター(FlashCanvas)にフォールバックしました。私たちにとって非常にうまくいったと思います。

12
ddotsenko

既にリストされているオプションは非常に優れていますが、ここで私が調査して出会ったこのトピックについてさらにいくつか説明します。

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/

そしていつものように、キャンバスを画像に保存したい場合があります:
http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

幸運と幸せな署名

2
Luigi D'Amico

別のOpenSource署名フィールドは https://github.com/applicius/jquery.signfield/ で、Sketch.jsを使用して登録されたjQueryプラグインです。

0
cchantep