Capture Signature menggunakan HTML5 dan iPad


165

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

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


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.


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


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.


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


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.