Форма отправки подписи с использованием SVG

Question

Я наткнулся на пример захвата подписи SVG @heycam здесь:

Захват подписи с использованием HTML5 и iPad Пример: http://mcc.id.au/2010/signature.html

Гораздо проще, чем любой предыдущий пример, который я видел, и он работает с мышью и touch!

Но как бы я отправил результат как часть формы?

Думаю, я бы хотел, чтобы он был представлен в виде строки base64, но я открыт для других опций ...

Для бонусных баллов ... есть ли способ убрать желтый фон и строку из представленных данных?

Спасибо!

Answer 1

То, что взлом sig-захвата на основе SVG @heycam технически великолепен, если ограниченная поддержка SVG в браузере не пугает вас, во что бы то ни стало, позвоните в iframe, извлеките исходный код и отправьте его на сервер в виде текста:1001 *

var strokes = window.frames[0].getSignature()

Чтобы получить строковую строку:

"M182,46 M141,30 L136,34 L136,36 L134,40 L134,47 L135,52 L146,64"

Вставьте ее в шаблон SVG следующим образом:

var svgstring = '<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100">' +
    '<path stroke="navy" stroke-width="2" fill="none" d='+ strokes +'/></svg>'

И отправьте это на сервер в скрытом поле ввода.

Однако есть более простой способ:

http://willowsystems.github.com/jSignature/

Он работает практически во всех браузерах (мобильных и настольных) и может экспортировать приятный, без шумов, плавныйкривые SVG.

Answer 2

Если вы посмотрите на его код, вы увидите, как он извлекает подпись в тег div.

В встроенном SVG-файле есть сценарий, который записывает содержимое в переменную "signaturePath" при возникновении событий,Затем он вызывает getSignature в iframe, чтобы вернуть путь.Чтобы извлечь путь, когда форма отправлена, вам нужно вызвать эту функцию и создать скрытый входной тег, который возвращает значение пути.Вы должны извлечь предоставленное значение (которое является путем) на стороне сервера.Позже вы можете воссоздать SVG, используя сохраненный путь (у которого не будет желтого фона).