Capture Signature menggunakan HTML5 dan iPad

165

Adakah yang tahu bagaimana ini bisa dilakukan? Apakah Anda menggunakan objek kanvas, svg, jQuery, dll?

ipad html canvas svg Mark Richman
sumber

Jawaban:

313

Berikut kurva versi berbasis kanvas dengan kurva lebar variabel (berdasarkan kecepatan gambar): demo di http://szimek.github.io/signature_pad dan kode di https://github.com/szimek/signature_pad .

sampel tanda tangan

szimek
sumber
1
Terima kasih sebelumnya, tanda tangan ls terbaik yang pernah saya lihat. Tidak tahu mengapa jawaban ini hanya memiliki 3 suara. github.com/szimek/signature_pad
VAdaihiep
3
Saya suka bahwa ini tidak bergantung pada perpustakaan js lain dan seberapa baik tampilannya. Satu catatan tentang menggunakannya yang membantu saya: tambahkan perbatasan ke kanvas sehingga Anda dapat melihat bagaimana itu sedang disesuaikan. Perhatikan juga bahwa perubahan css pada kanvas melakukan beberapa hal gila, jadi tentukan saja tinggi dan lebar elemen kanvas jika ini tidak terkendali.
Brian McGinity
3
Jake, apa yang sebenarnya tidak ada dalam opini Anda dalam dokumentasi yang disediakan dalam file README? Saya terbuka untuk saran cara memperbaikinya.
szimek
7
Saya minta maaf. Saya pikir dokumentasi Anda sebenarnya memadai. Tampaknya terbatas sampai saya menyadari betapa mudahnya ini untuk digunakan. Saya mendapatkannya sepenuhnya diimplementasikan dalam bentuk, menyimpan dalam database dan mengambil kembali ke halaman dalam waktu kurang dari satu jam. Saya kira, saya membandingkannya dengan perpustakaan yang jauh lebih kompleks untuk digunakan seperti jawaban yang dipilih di atas. Saya belum pernah bekerja dengan data URI sebelumnya, tetapi ini adalah cara yang sangat brilian untuk menangani penyimpanan data. Jadi, saya hanya harus menyesuaikan diri dengan itu dan kemudian menyimpan dan mengambil dalam database sangat ... mudah ... wow. Terima kasih lagi!
Jake
1
@RonaldinhoLearnCoding, periksa file README - ada daftar semua opsi yang memungkinkan. Yang Anda cari disebut "penColor".
szimek
60

Elemen kanvas dengan JavaScript akan berfungsi dengan baik.

Bahkan, Signature Pad (plugin jQuery) sudah menerapkan ini.

Ben S
sumber
2
Saya heran betapa indahnya plugin ini.
Gourneau
Begitu sempurna! Terima kasih telah berbagi!
sagescrub
Saya menemukan plugin ini sangat sulit untuk digunakan secara tidak terduga. Semua demo sangat spesifik dan rumit untuk diterapkan. Jelas seperti pendekatan pad tanda tangan lain yang lebih baik: stackoverflow.com/a/17200715/76672 Dengan hampir tidak ada dokumentasi, saya bisa membuatnya bekerja ...
Jake
18

Ini adalah versi yang diretas dengan cepat menggunakan SVG yang baru saja saya lakukan. Bekerja dengan baik untuk saya di iPhone saya. Juga berfungsi di browser desktop menggunakan acara mouse normal.

heycam
sumber
Saya ingin tahu cara menggambar tanda tangan yang disimpan
Yuri Morales
Bagaimana cara menyimpan tanda tangan sebagai file png atau menunjukkan tanda tangan dengan cara lain?
Andrus
12

Mungkin dua teknologi browser terbaik untuk ini adalah Canvas, dengan Flash sebagai cadangannya.

Kami mencoba VML di IE sebagai cadangan untuk Canvas, tetapi jauh lebih lambat daripada Flash. SVG lebih lambat dari yang lainnya.

Dengan jSignature ( http://willowsystems.github.com/jSignature/ ) kami menggunakan Canvas sebagai primer, dengan fallback ke emulator Canvas berbasis Flash (FlashCanvas) untuk IE8 dan lebih sedikit. Id 'bilang bekerja sangat baik untuk kita.

ddotsenko
sumber
Ini sangat bagus ... Saya suka itu efek perataan. Terbaik yang pernah saya lihat.
Camden S.
2

Opsi yang sudah terdaftar sangat bagus, namun di sini ada beberapa topik lagi yang telah saya teliti dan temui.

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 /

Dan seperti biasa, Anda mungkin ingin menyimpan kanvas ke gambar:
http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

semoga sukses dan selamat menandatanganinya

Luigi D'Amico
sumber