Przechwyć podpis za pomocą HTML5 i iPada


Odpowiedzi:


313

Oto kolejna wersja na płótnie z krzywymi o zmiennej szerokości (w oparciu o prędkość rysowania): demo na http://szimek.github.io/signature_pad i kod na https://github.com/szimek/signature_pad .

próbka podpisu


1
Z góry dziękuję, najlepsza biblioteka podpisów js, jaką kiedykolwiek widziałem. Nie wiem, dlaczego ta odpowiedź miała tylko 3 głosy. github.com/szimek/signature_pad
VAdaihiep

3
Podoba mi się, że to nie zależy od innych bibliotek js i jak dobrze wygląda. Jedna uwaga na temat jego używania, która mi pomogła: dodaj obramowanie do płótna, abyś mógł zobaczyć, jak jest dostosowywany. Zwróć również uwagę, że zmiany css w kanwie powodują pewne szalone rzeczy, więc po prostu określ wysokość i szerokość w elemencie canvas, jeśli wymknie się to spod kontroli.
Brian McGinity,

3
Jake, czego dokładnie Twoim zdaniem brakuje w dokumentacji zawartej w pliku README? Jestem otwarty na sugestie, jak to poprawić.
szimek

7
Przepraszam. Myślę, że twoja dokumentacja jest właściwie wystarczająca. Wydawało się ograniczone, dopóki nie zdałem sobie sprawy, jak łatwe jest to w użyciu. W pełni zaimplementowałem go w formie, przechowując w bazie danych i przywracając do strony w niecałą godzinę. Przypuszczam, że porównywałem to z bibliotekami, których użycie było znacznie bardziej skomplikowane, jak wybrana powyżej odpowiedź. Nie pracowałem wcześniej z identyfikatorami URI danych, ale jest to naprawdę genialny sposób na przechowywanie danych. Po prostu musiałem się do nich zaaklimatyzować, a następnie przechowywanie i wyszukiwanie w bazie danych było takie ... łatwe ... wow. Dzięki jeszcze raz!
Jake

1
@RonaldinhoLearnCoding sprawdź plik README - jest lista wszystkich możliwych opcji. Ten, którego szukasz, nazywa się „penColor”.
szimek

60

Element canvas z pewną ilością JavaScript działałby świetnie.

W rzeczywistości Signature Pad (wtyczka jQuery) już to zaimplementował.


2
Jestem zdumiony, jak piękna jest ta wtyczka.
Gourneau

Tak doskonały! Dzięki za udostępnienie!
sagescrub

Uważam, że ta wtyczka jest naprawdę trudna w użyciu. Wszystkie wersje demonstracyjne były bardzo szczegółowe i trudne do zastosowania. Zdecydowanie lepsze podejście do innego padu do podpisów: stackoverflow.com/a/17200715/76672 Z prawie brakiem dokumentacji udało mi się go uruchomić ...
Jake


12

Być może najlepsze dwie technologie przeglądarek do tego celu to Canvas z Flash jako zapasowym.

Wypróbowaliśmy VML w IE jako kopię zapasową dla Canvas, ale był znacznie wolniejszy niż Flash. SVG był wolniejszy niż cała reszta.

W przypadku jSignature ( http://willowsystems.github.com/jSignature/ ) użyliśmy Canvas jako podstawowego, z powrotem do emulatora Canvas opartego na Flash (FlashCanvas) dla IE8 i mniej. Powiedziałbym, że działał dla nas bardzo dobrze.


To jest naprawdę fajne ... Lubię to wygładzające efekty. Najlepsze, jakie widziałem.
Camden S.

2

Wymienione już opcje są bardzo dobre, jednak tutaj jest kilka więcej na ten temat, które zbadałem i znalazłem.

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 /

I jak zawsze możesz zapisać płótno do obrazu:
http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

powodzenia i szczęśliwego podpisywania


Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.