主題:
[html/html5]
[分享]Html5簽名後輸出圖片
[打印本頁]
發表人:
ROACH
時間:
2018-1-25 01:49 PM
主題:
[分享]Html5簽名後輸出圖片
去年換電信公司
去中華電信要要我簽名時，櫃台阿姨拿的一個小台的平板簽名版給我簽名子.....
後來去台灣之星，小姐在電腦上打一打資料後 打開手邊的平板連到一個網頁，請我直接在iPad上用手指簽名
也因為我最近接到一個需求需要讓服務人員給客人在iPad上簽名，所以去找的一些資訊
後來看到一篇教學
Html5簽名後輸出圖片
https://blog.yslifes.com/archives/2054/
程式碼也很簡單
可以把上面的javascript那段存成js後放在要輸出的div的下面
簽名的時候無論用手指還是在電腦上用滑鼠簽名發現會位移
可以在JavaScript裡面的mousedown以及mousemove微調一下
簽名後 可以輸出成 base64 的方式 把canvas.toDataURL("image/png")輸出的內容寫回去DB，需要的時候在讀出來就是客人的簽名的
CODE:
[Copy to clipboard]
$("#qmimg").attr("src", canvas.toDataURL("image/png"));
只是目前遇到很怪的一點，簽名後輸出到圖片後正常
寫入資料庫後再讀出
在PC版Google Chrome看起來圖片正常
在iPad的瀏覽器圖片會少掉下面一截
還是針對簽名的設計功能大家有什麼想法呢
[ROACH 在 2018-1-25 01:56 PM 作了最後編輯]
發表人:
innova
時間:
2018-1-25 04:22 PM
APPLE Co. 預設的 browser似乎只有 safari ?
建議在 iPad/iPhone上 裝個 Chrome browser來確認看看
看是不是 browser對部分 HTML/JavaScript code的解釋不同導致?
發表人:
H.T.DEMON
時間:
2018-1-26 01:03 AM
這種簽名方式效果很糟糕啊... 覺得還是得用個能準確轉換字跡的硬體(boogie board, Wacom Bamboo Slate)達成數位簽名的目的
說穿了這種簽名方式只是因為程式好寫
發表人:
ROACH
時間:
2018-1-26 09:23 AM
引用:
H.T.DEMON
寫到:
這種簽名方式效果很糟糕啊... 覺得還是得用個能準確轉換字跡的硬體(boogie board, Wacom Bamboo Slate)達成數位簽名的目的
說穿了這種簽名方式只是因為程式好寫
覺得這樣很方便啊!不用再拿一個簽名板
尤其是上次NP到台灣之星 就直接拿iPad給我簽的...
猜想假如業務員或服務人員去客人維修後..不用再準備簽名板
只要在iPad上輸入相關資訊後請客人在iPad或平板上面用手指或觸控筆簽名後...
背後資料庫可以在針對內容以及客人的簽名轉PDF後寄給客人很方便呢
[ROACH 在 2018-1-26 09:24 AM 作了最後編輯]
歡迎光臨 TWed2k (http://twed2k.org/)
Powered by Discuz! 4.1.0
