Захватить подпись с помощью HTML5 и iPad

165

Кто-нибудь знает, как это можно сделать? Вы бы использовали объект canvas, svg, jQuery и т. Д.?

ipad html canvas svg Марк Ричман
источник

Ответы:

313

Вот еще одна версия на основе холста с кривыми переменной ширины (в зависимости от скорости рисования): демонстрация на http://szimek.github.io/signature_pad и код на https://github.com/szimek/signature_pad .

образец подписи

szimek
источник
1
Заранее спасибо, лучшая подписная библиотека js, которую я когда-либо видел. Не знаю, почему этот ответ только 3 голоса. github.com/szimek/signature_pad
VAdaihiep
3
Мне нравится, что это не зависит от других библиотек JS и как хорошо это выглядит. Одно замечание по его использованию, которое мне помогло: добавьте рамку на холст, чтобы вы могли видеть, как она настраивается. Также обратите внимание, что изменения CSS в канве делают некоторые сумасшедшие вещи, поэтому просто укажите высоту и ширину в элементе canvas, если это выходит из-под контроля.
Брайан МакГинити
3
Джейк, что именно, по твоему мнению, отсутствует в документации, представленной в файле README? Я открыт для предложений, как его улучшить.
szimek
7
Я извиняюсь. Я думаю, что ваша документация действительно адекватна. Это казалось ограниченным, пока я не понял, насколько легко это использовать. Я полностью реализовал его в форме, сохранив в базе данных и вернувшись на страницу менее чем за час. Полагаю, я сравнивал это с библиотеками, которые были намного сложнее в использовании, как выбранный ответ выше. Раньше я не работал с URI данных, но это действительно замечательный способ хранения данных. Итак, мне просто нужно было привыкнуть к ним, а потом хранить и извлекать из базы данных было так ... легко ... вау. Еще раз спасибо!
Джейк,
1
@RonaldinhoLearnCoding проверьте файл README - там есть список всех возможных вариантов. Тот, который вы ищете, называется "penColor".
Szimek
60

Элемент canvas с некоторым JavaScript отлично подойдет.

На самом деле, Signature Pad (плагин jQuery) уже реализовал это.

Бен С
источник
2
Я удивлен, насколько красивый этот плагин.
Gourneau
Настолько совершенен! Спасибо, что поделился!
sagescrub
Я обнаружил, что этот плагин действительно трудно использовать без разрешения. Все демонстрации были очень конкретными и хитрыми в применении. Определенно, как и другие подходы для подписи, лучше: stackoverflow.com/a/17200715/76672 Почти без документации я смог заставить ее работать ...
Джейк
18

Вот быстро взломанная версия этого с использованием SVG, который я только что сделал. Хорошо работает для меня на моем iPhone. Также работает в настольном браузере, используя обычные события мыши.

heycam
источник
Я хочу знать, как нарисовать сохраненную подпись
Юрий Моралес
Как сохранить подпись в виде png файла или показать подпись другим способом?
Андрус
12

Возможно, лучшими двумя браузерными технологиями для этого являются Canvas с Flash в качестве резервной копии.

Мы пробовали VML на IE в качестве резервной копии для Canvas, но это было намного медленнее, чем Flash. SVG был медленнее всех остальных.

В jSignature ( http://willowsystems.github.com/jSignature/ ) мы использовали Canvas в качестве основного, с откатом к Flash-эмулятору Canvas (FlashCanvas) для IE8 и менее. Я бы сказал, очень хорошо сработало для нас.

ddotsenko
источник
Это действительно хорошо ... Мне нравятся сглаживающие эффекты. Лучшее, что я видел.
Камден С.
2

Уже перечисленные варианты очень хороши, однако вот еще несколько по этой теме, которую я исследовал и натолкнулся.

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/

удачи и счастливого подписания

Луиджи д'Амико
источник