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

Question

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

127

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

Mark Richman 22 июнь 2010, в 20:01

Источник

Теги:

html5

svg

canvas

ipad

6 ответов

58

Элемент canvas с некоторым JavaScript будет работать отлично.

Фактически, Signature Pad (плагин jQuery) уже реализовано.

Ben S 22 июнь 2010, в 21:04

2

Я удивлен, насколько красив этот плагин.
Gourneau 14 март 2012, в 06:49
0

Настолько совершенен! Спасибо, что поделился!
sagescrub 24 фев. 2013, в 01:18
0

Я обнаружил, что этот плагин действительно трудно использовать без разрешения. Все демонстрации были очень конкретными и хитрыми в применении. Определенно, как и другие подходы для подписи, лучше: stackoverflow.com/a/17200715/76672 Почти без документации я смог заставить ее работать ...
Jake 04 сен. 2013, в 05:46

Показать ещё 1 комментарий

14

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

heycam 23 июнь 2010, в 04:57

0

Я хочу знать, как нарисовать сохраненную подпись
Yuri Morales 20 сен. 2013, в 14:57
0

Как сохранить подпись в виде png файла или показать подпись другим способом?
Andrus 05 март 2015, в 07:25

11

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

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

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

ddotsenko 01 июнь 2012, в 20:30

0

Это действительно хорошо ... Мне нравятся сглаживающие эффекты. Лучшее, что я видел.
Camden S. 04 июнь 2013, в 19:04

0

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

  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/

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

Luigi D'Amico 14 июнь 2017, в 12:26

0

Другое поле подписи OpenSource https://github.com/applicius/jquery.signfield/, зарегистрированный плагин jQuery с использованием Sketch.js.

cchantep 04 авг. 2014, в 20:06

Ещё вопросы

Я удивлен, насколько красив этот плагин.
Настолько совершенен! Спасибо, что поделился!
Я обнаружил, что этот плагин действительно трудно использовать без разрешения. Все демонстрации были очень конкретными и хитрыми в применении. Определенно, как и другие подходы для подписи, лучше: stackoverflow.com/a/17200715/76672 Почти без документации я смог заставить ее работать ...
Я хочу знать, как нарисовать сохраненную подпись
Как сохранить подпись в виде png файла или показать подпись другим способом?
Это действительно хорошо ... Мне нравятся сглаживающие эффекты. Лучшее, что я видел.

szimek · Accepted Answer · 2013-06-19T20-40-00.000Z

239

Лучший ответ

Здесь другая версия на основе холста с переменной шириной (на основе скорости рисования): demo at http://szimek.github.io/signature_pad и код https://github.com/szimek/signature_pad.

szimek 19 июнь 2013, в 20:40

1

Заранее спасибо, лучшая подписная библиотека js, которую я когда-либо видел. Не знаю, почему этот ответ только что получил 3 голоса. github.com/szimek/signature_pad
VAdaihiep 02 авг. 2013, в 10:17
2

Мне нравится, что это не зависит от других библиотек JS и как хорошо это выглядит. Одно замечание по его использованию, которое мне помогло: добавьте рамку на холст, чтобы вы могли видеть, как она настраивается. Также обратите внимание, что изменения CSS в канве делают некоторые сумасшедшие вещи, поэтому просто укажите высоту и ширину в элементе canvas, если это выходит из-под контроля.
Brian McGinity 17 авг. 2013, в 04:25
0

Отсутствие документации бесполезно, но на демонстрационной странице все изложено довольно четко. Я работаю над тем, чтобы сохранить его в базе данных и получить. Это действительно хорошая библиотека. Спасибо szimek!
Jake 04 сен. 2013, в 05:43
2

Джейк, что именно, по твоему мнению, отсутствует в документации, представленной в файле README? Я открыт для предложений, как его улучшить.
szimek 04 сен. 2013, в 12:00
6

Приношу извинения. Я думаю, что ваша документация действительно адекватна. Это казалось ограниченным, пока я не понял, насколько легко это использовать. Я полностью реализовал его в форме, сохранив в базе данных и вернувшись на страницу менее чем за час. Я полагаю, я сравнивал это с библиотеками, которые были гораздо более сложны в использовании, как выбранный ответ выше. Я раньше не работал с URI данных, но это действительно замечательный способ хранения данных. Итак, мне просто нужно было привыкнуть к ним, а потом хранить и извлекать из базы данных было так ... легко ... вау. Еще раз спасибо!
Jake 04 сен. 2013, в 16:18
0

Не нужно извиняться :) Я рад, что вам это нравится. Я, вероятно, добавлю некоторую информацию или хотя бы ссылку на вики-страницу об обработке URI данных на стороне сервера. Ура!
szimek 05 сен. 2013, в 07:31
0

szimek, ваша библиотека для подписи прекрасно работает, это именно то, что я искал, и она очень проста в использовании. Спасибо!
h-bomb 07 фев. 2014, в 05:19
0

я не смог каким-то образом отключить прокрутку для IOS, но этот плагин работает как шарм! Рекомендован
poorva 20 фев. 2014, в 12:51
0

У меня есть несколько проблем с плагином для панели подписи, я думаю, что это в основном из-за того, что я удалил все абсолютное позиционирование (панель для подписи является частью страницы, а не отдельной страницей, как в демоверсии) , Был взлом, но это довольно расстраивает.
martincarlin87 28 март 2014, в 09:26
0

@ martincarlin87 Вы говорите о настольном или мобильном?
szimek 28 март 2014, в 12:25
0

@szimek Пока только тестирую на рабочем столе. Не могу заставить его работать по какой-то причине.
martincarlin87 28 март 2014, в 12:59
0

Это прекрасно
Prabhu Murthy 11 май 2014, в 07:48
0

Извините, что я так долго принял этот ответ. Я отказался от проекта несколько лет назад.
Mark Richman 02 июнь 2014, в 15:59
0

@szimek Мне нужно 2 подписи на одной странице, как мне это сделать?
Ronaldinho Learn Coding 15 сен. 2015, в 14:30
1

@RonaldinhoLearnCoding Проверьте это jsfiddle.net/szimek/ps65Q
szimek 16 сен. 2015, в 19:14
0

@szimek Как изменить цвет пера на красный?
Ronaldinho Learn Coding 17 сен. 2015, в 17:50
1

@RonaldinhoLearnCoding проверьте файл README - там есть список всех возможных вариантов. Тот, который вы ищете, называется "penColor".
szimek 18 сен. 2015, в 08:42
0

@szimek Большое спасибо за замечательный плагин и интуитивно понятную поддержку!
Ronaldinho Learn Coding 18 сен. 2015, в 13:47

Показать ещё 16 комментариев