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

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

Discuz! 代碼
提示插入
直接插入
說明訊息

添加文字底框

內容 [字數檢查]:

表情符號













更多 Smilies

字型大小

小|中|大|巨

溫馨提示：本區開放遊客瀏覽。

儲存草稿｜恢復草稿｜...

文章關鍵字 : [功能說明]
(關鍵字可加強搜索準確性, 如關鍵字多於一組, 請以 , 作分隔, e.g. : 阿笨,shiuh,第一笨)

關閉 URL 識別 | html 禁用
關閉表情符號 | 表情符號可用
關閉 Discuz! 代碼 | Discuz! 代碼可用
使用個人簽名
接收新回覆信件通知

推薦放檔網絡空間

檔案(Torent, zip等)

圖片(JPG, GIF等)

>>>歡迎推薦好用空間

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 作了最後編輯]

H.T.DEMON

發表於 2018-1-26 01:03 AM

innova

發表於 2018-1-25 04:22 PM

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

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

ROACH

發表於 2018-1-25 01:49 PM

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