Czy ktoś wie, jak można to zrobić? Czy użyłbyś obiektu płótna, svg, jQuery itp.?
Przechwyć podpis za pomocą HTML5 i iPada
Odpowiedzi:
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 .
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
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,
Jake, czego dokładnie Twoim zdaniem brakuje w dokumentacji zawartej w pliku README? Jestem otwarty na sugestie, jak to poprawić.
—
szimek
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
@RonaldinhoLearnCoding sprawdź plik README - jest lista wszystkich możliwych opcji. Ten, którego szukasz, nazywa się „penColor”.
—
szimek
Element canvas z pewną ilością JavaScript działałby świetnie.
W rzeczywistości Signature Pad (wtyczka jQuery) już to zaimplementował.
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
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.
Chcę wiedzieć, jak narysować zapisany podpis
—
Yuri Morales
Jak zapisać podpis jako plik png lub pokazać podpis w inny sposób?
—
Andrus
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.
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
Kolejnym polem podpisu OpenSource jest https://github.com/applicius/jquery.signfield/ , zarejestrowana wtyczka jQuery przy użyciu Sketch.js.