Adakah yang tahu bagaimana ini bisa dilakukan? Apakah Anda menggunakan objek kanvas, svg, jQuery, dll?
Capture Signature menggunakan HTML5 dan iPad
Jawaban:
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 .
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
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
Jake, apa yang sebenarnya tidak ada dalam opini Anda dalam dokumentasi yang disediakan dalam file README? Saya terbuka untuk saran cara memperbaikinya.
—
szimek
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
@RonaldinhoLearnCoding, periksa file README - ada daftar semua opsi yang memungkinkan. Yang Anda cari disebut "penColor".
—
szimek
Elemen kanvas dengan JavaScript akan berfungsi dengan baik.
Bahkan, Signature Pad (plugin jQuery) sudah menerapkan ini.
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
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.
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
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.
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
Bidang tanda tangan OpenSource lain adalah https://github.com/applicius/jquery.signfield/ , plugin jQuery terdaftar menggunakan Sketch.js.