Board logo

主題: [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