形式提交使用SVG

捕獲的簽名我通過@heycam這裏穿過一個例子SVG簽名捕獲傳來：形式提交使用SVG

Capture Signature using HTML5 and iPad 例子：http://mcc.id.au/2010/signature.html

比以往任何例子，我所看到的簡單得多，而且它的工作原理鼠標和觸摸！

但是，如何將結果作爲表單的一部分提交？

我想我會希望它提交爲Base64字符串，但我接受其他選擇......

加分......任何方式剝奪從提交的數據的黃色背景和線？

謝謝！

來源

2011-09-22 Jason Wood

我是base64的粉絲，我沒有看到更好的解決方案... – Mohsen

輸出路徑中不包含黃色背景和虛線，它們都是包含的signature.svg的元素。簽名路徑存儲在svg元素''的d屬性中。加載頁面後，打開Firebug並摺疊打開SVG元素。畫一個簽名，你會看到被填充的d屬性。 – fvu

如果你看他的代碼，你可以看到他是如何將簽名提取到div標籤中的。

內聯SVG中有一個腳本在事件觸發時將內容記錄到「signaturePath」變量中。然後他在iframe中調用「getSignature」來返回路徑。爲了提取路徑，在提交表單時，您需要調用該函數並創建一個隱藏的輸入標記，該標記具有返回路徑的值。你會提取服務器端提交的值（這是路徑）。稍後可以使用保存的路徑（不會有黃色背景）重新創建SVG。

來源

2011-09-23 01:04:00

由@heycam提供的基於SVG的sig捕獲在技術上很棒，如果對SVG的有限瀏覽器支持不會嚇到你，通過調用iframe，提取源文件並將其作爲文本推送到服務器端：

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。

來源

2012-06-01 20:57:39 ddotsenko

形式提交使用SVG

回答

相關問題