Gửi mẫu chữ ký chụp sử dụng SVG

Question

Tôi đã xem qua một ví dụ chụp SVG chữ ký bởi @heycam đây:

Capture Signature using HTML5 and iPad Ví dụ: http://mcc.id.au/2010/signature.html

đơn giản hơn nhiều so với bất kỳ ví dụ trước tôi đã thấy, và nó hoạt động với chuột và liên lạc!

Nhưng làm cách nào để gửi kết quả dưới dạng một phần của biểu mẫu?

Tôi nghĩ rằng tôi muốn nó gửi như là một chuỗi base64 nhưng tôi mở cửa cho các lựa chọn khác ...

Đối với điểm thưởng ... cách nào để dải nền màu vàng và dòng từ các dữ liệu gửi ?

Cảm ơn!

Answer 1

Nếu bạn nhìn vào mã của mình, bạn có thể xem cách anh ấy trích xuất chữ ký vào thẻ div.

Có một tập lệnh trong SVG nội tuyến ghi lại nội dung vào biến "signaturePath" khi các sự kiện được kích hoạt. Sau đó, anh gọi "getSignature" trong khung nội tuyến để trả về đường dẫn. Để trích xuất đường dẫn, khi biểu mẫu được gửi, bạn cần gọi hàm đó và tạo thẻ đầu vào bị ẩn có giá trị của đường dẫn được trả về. Bạn sẽ trích xuất giá trị đã gửi (đó là đường dẫn) ở phía máy chủ. Sau đó bạn có thể tạo lại SVG bằng đường dẫn đã lưu (không có nền màu vàng).

Answer 2

Việc quay sig dựa trên SVG hack bởi @heycam là kỹ thuật tuyệt vời, nếu giới hạn hỗ trợ trình duyệt cho SVG không làm bạn sợ, bằng mọi cách, hãy gọi vào khung nội tuyến, trích xuất nguồn và đẩy phía máy chủ dưới dạng văn bản:

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

Để có được một dòng chuỗi:

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

Đẩy nó vào SVG mẫu như vậy:

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>' 

Và đẩy nó vào máy chủ trong trường nhập ẩn.

Tuy nhiên, có một cách dễ dàng hơn:

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

Nó hoạt động ở hầu hết các trình duyệt (điện thoại di động và máy tính để bàn) và có thể xuất khẩu tốt đẹp, de-noised, đường cong mượt mà SVG.