Кто-нибудь знает, как это можно сделать? Вы бы использовали объект canvas, svg, jQuery и т. Д.?
Захватить подпись с помощью HTML5 и iPad
Ответы:
Вот еще одна версия на основе холста с кривыми переменной ширины (в зависимости от скорости рисования): демонстрация на http://szimek.github.io/signature_pad и код на https://github.com/szimek/signature_pad .
1
Заранее спасибо, лучшая подписная библиотека js, которую я когда-либо видел. Не знаю, почему этот ответ только 3 голоса. github.com/szimek/signature_pad
—
VAdaihiep
Мне нравится, что это не зависит от других библиотек JS и как хорошо это выглядит. Одно замечание по его использованию, которое мне помогло: добавьте рамку на холст, чтобы вы могли видеть, как она настраивается. Также обратите внимание, что изменения CSS в канве делают некоторые сумасшедшие вещи, поэтому просто укажите высоту и ширину в элементе canvas, если это выходит из-под контроля.
—
Брайан МакГинити
Джейк, что именно, по твоему мнению, отсутствует в документации, представленной в файле README? Я открыт для предложений, как его улучшить.
—
szimek
Я извиняюсь. Я думаю, что ваша документация действительно адекватна. Это казалось ограниченным, пока я не понял, насколько легко это использовать. Я полностью реализовал его в форме, сохранив в базе данных и вернувшись на страницу менее чем за час. Полагаю, я сравнивал это с библиотеками, которые были намного сложнее в использовании, как выбранный ответ выше. Раньше я не работал с URI данных, но это действительно замечательный способ хранения данных. Итак, мне просто нужно было привыкнуть к ним, а потом хранить и извлекать из базы данных было так ... легко ... вау. Еще раз спасибо!
—
Джейк,
@RonaldinhoLearnCoding проверьте файл README - там есть список всех возможных вариантов. Тот, который вы ищете, называется "penColor".
—
Szimek
Элемент canvas с некоторым JavaScript отлично подойдет.
На самом деле, Signature Pad (плагин jQuery) уже реализовал это.
Я удивлен, насколько красивый этот плагин.
—
Gourneau
Настолько совершенен! Спасибо, что поделился!
—
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.