Хтось знає, як це можна зробити? Чи використовуєте ви об'єкт полотна, svg, jQuery тощо?
Захоплення підпису за допомогою HTML5 та iPad
Відповіді:
Ось ще одна версія на основі полотна зі змінною шириною (на основі швидкості малювання): демонстраційна версія на веб-сайті http://szimek.github.io/signature_pad та код за адресою https://github.com/szimak/signature_pad .
1
Дякую заздалегідь, найкраща версія підпису js, яку я коли-небудь бачив. Не знаю, чому за цю відповідь було лише 3 голоси. github.com/szimak/signature_pad
—
VAdaihiep
Мені подобається, що це не покладається на інші бібліотеки js та наскільки добре це виглядає. Одна примітка про його використання, яка допомогла мені: додайте рамку на полотно, щоб ви могли бачити, як воно коригується. Також зауважте, що зміни css на полотні роблять деякі божевільні речі, тому просто вкажіть висоту та ширину елемента елемента, якщо це вийде з-під контролю.
—
Брайан Макгініті
Джейку, чого саме не вистачає на твою думку в документації, наданій у файлі README? Я відкритий для пропозицій, як його вдосконалити.
—
сімек
Я прошу вибачення. Я думаю, що ваша документація насправді достатня. Це здавалося обмеженим, поки я не зрозумів, наскільки просто це використовувати. Я повною мірою реалізував його у формі, зберігаючи в базі даних і повертаючись назад на сторінку за менше години. Я думаю, я порівнював це з бібліотеками, які були набагато складнішими для використання, як обрана відповідь вище. Я раніше не працював з URI даних, але це справді геніальний спосіб поводження зі зберіганням даних. Отже, я просто повинен був привітатись до них, а потім зберігати та витягувати в базі даних було так ... просто ... вау. Знову дякую!
—
Джейк
@RonaldinhoLearnCoding ознайомтесь з файлом README - є список усіх можливих варіантів. Той, кого ви шукаєте, називається "penColor".
—
szimek
Елемент полотна з деяким JavaScript спрацював би чудово.
Насправді, Signature Pad (плагін jQuery) вже реалізований.
Я здивований, наскільки гарний цей плагін.
—
Гурно
Так ідеально! Дякую, що поділились!
—
sagescrub
Мені здалося, що цей плагін дуже важко використовувати невдало. Усі демонстрації були дуже специфічними та складними у застосуванні. Однозначно, як і інший підхід для підпису, краще: stackoverflow.com/a/17200715/76672 Маючи майже ніякої документації, я зміг змусити її працювати ...
—
Джейк
Ось швидко зламана версія цього файлу за допомогою SVG, яку я щойно зробив. Добре працює для мене на iPhone. Також працює у настільному браузері, використовуючи звичайні події миші.
Хочу знати, як намалювати збережений підпис
—
Юрій Моралес
Як зберегти підпис як png-файл або показати підпис іншим способом?
—
Андрус
Мабуть, найкращі два технології браузера для цього - Canvas, із резервною копією Flash.
Ми намагалися VML на IE як резервне копіювання для Canvas, але це було набагато повільніше, ніж Flash. SVG був повільнішим, ніж усі інші.
За допомогою jSignature ( http://willowsystems.github.com/jSignature/ ) ми використовували Canvas як основний, із резервним до Flash-емулятора Canvas (FlashCanvas) для IE8 і менше. Скажімо, добре працював для нас.
Це дійсно приємно ... Мені подобається, що це згладжуючі ефекти. Найкраще, що я бачив.
—
Камден С.
Перелічені варіанти вже дуже хороші, однак тут ще декілька на цю тему, які я досліджував і натрапляв.
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 /
І, як завжди, ви можете зберегти полотно до зображення:
http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/
удачі та щасливого підпису
Ще одне поле підпису OpenSource - https://github.com/applicius/jquery.signfield/ , зареєстрований плагін jQuery за допомогою Sketch.js.