TWed2k - 程式開發討論區 - [分享]Html5簽名後輸出圖片

ROACH
版主

減肥中！請勿餵食

．積分： 15119
．精華： 14
．文章： 11767
．收花： 140853 支
．送花： 6005 支
．比例： 0.04
．在線： 8870 小時
．瀏覽： 85616 頁
．註冊： 8210 天
．失蹤： 5 天
．鄉下地方

#1 : 2018-1-25 01:49 PM 只看本作者	送花 (9) 送出中...

去年換電信公司
去中華電信要要我簽名時，櫃台阿姨拿的一個小台的平板簽名版給我簽名子.....
後來去台灣之星，小姐在電腦上打一打資料後打開手邊的平板連到一個網頁，請我直接在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
銀驢友〔高級〕

今日心情

．積分： 916
．文章： 2714
．收花： 7188 支
．送花： 1461 支
．比例： 0.2
．在線： 2182 小時
．瀏覽： 15202 頁
．註冊： 7173 天
．失蹤： 25 天
．火星

#2 : 2018-1-25 04:22 PM 只看本作者	送花 (3) 送出中...

APPLE Co. 預設的 browser似乎只有 safari ?

建議在 iPad/iPhone上裝個 Chrome browser來確認看看
看是不是 browser對部分 HTML/JavaScript code的解釋不同導致?

[如果你喜歡本文章，就按本文章之鮮花～送花給作者吧，你的支持就是別人的動力來源]

本文連接

快速回覆

H.T.DEMON
論壇第一呆

天堂的惡魔

．積分： 321
．文章： 2497
．收花： 1170 支
．送花： 629 支
．比例： 0.54
．在線： 2355 小時
．瀏覽： 24805 頁
．註冊： 8197 天
．失蹤： 272 天

#3 : 2018-1-26 01:03 AM 只看本作者	送花 (0) 送出中...

這種簽名方式效果很糟糕啊... 覺得還是得用個能準確轉換字跡的硬體(boogie board, Wacom Bamboo Slate)達成數位簽名的目的
說穿了這種簽名方式只是因為程式好寫

[如果你喜歡本文章，就按本文章之鮮花～送花給作者吧，你的支持就是別人的動力來源]

本文連接

快速回覆

ROACH
版主

減肥中！請勿餵食

．積分： 15119
．精華： 14
．文章： 11767
．收花： 140853 支
．送花： 6005 支
．比例： 0.04
．在線： 8870 小時
．瀏覽： 85616 頁
．註冊： 8210 天
．失蹤： 5 天
．鄉下地方

#4 : 2018-1-26 09:23 AM 只看本作者	送花 (0) 送出中...

引用:

H.T.DEMON寫到:

這種簽名方式效果很糟糕啊... 覺得還是得用個能準確轉換字跡的硬體(boogie board, Wacom Bamboo Slate)達成數位簽名的目的
說穿了這種簽名方式只是因為程式好寫

覺得這樣很方便啊!不用再拿一個簽名板
尤其是上次NP到台灣之星就直接拿iPad給我簽的...

猜想假如業務員或服務人員去客人維修後..不用再準備簽名板
只要在iPad上輸入相關資訊後請客人在iPad或平板上面用手指或觸控筆簽名後...
背後資料庫可以在針對內容以及客人的簽名轉PDF後寄給客人很方便呢

[ROACH 在 2018-1-26 09:24 AM 作了最後編輯]

[如果你喜歡本文章，就按本文章之鮮花～送花給作者吧，你的支持就是別人的動力來源]

本文連接

快速回覆