Przechwyć podpis za pomocą HTML5 i iPada

165

Czy ktoś wie, jak można to zrobić? Czy użyłbyś obiektu płótna, svg, jQuery itp.?

ipad html canvas svg Mark Richman
źródło

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

szimek
źródło
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ł.

Ben S.
źródło
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
18

Oto szybko zhakowana wersja tego przy użyciu SVG, którą właśnie zrobiłem. Działa dobrze na moim iPhonie. Działa również w przeglądarce na komputerze stacjonarnym przy użyciu normalnych zdarzeń myszy.

heycam
źródło
Chcę wiedzieć, jak narysować zapisany podpis
Yuri Morales
Jak zapisać podpis jako plik png lub pokazać podpis w inny sposób?
Andrus
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.

ddotsenko
źródło
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

Luigi D'Amico
źródło