RSS   



  可打印版本 | 推薦給朋友 | 訂閱主題 | 收藏主題 | 純文字版  


 


 
主題: [html/html5] [分享]Html5簽名後輸出圖片   字型大小:||| 
ROACH
版主
等級: 30等級: 30等級: 30等級: 30等級: 30等級: 30等級: 30等級: 30
減肥中!請勿餵食

十週年紀念徽章(四級)  

 . 積分: 15118
 . 精華: 14
 . 文章: 11766
 . 收花: 140844 支
 . 送花: 6005 支
 . 比例: 0.04
 . 在線: 8869 小時
 . 瀏覽: 85616 頁
 . 註冊: 7973
 . 失蹤: 3
 . 鄉下地方
#1 : 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,需要的時候在讀出來就是客人的簽名的

$("#qmimg").attr("src", canvas.toDataURL("image/png"));
只是目前遇到很怪的一點,簽名後輸出到圖片後正常
寫入資料庫後再讀出
在PC版Google Chrome看起來圖片正常
在iPad的瀏覽器圖片會少掉下面一截
還是針對簽名的設計功能大家有什麼想法呢

[ROACH 在  2018-1-25 01:56 PM 作了最後編輯]



[如果你喜歡本文章,就按本文章之鮮花~送花給作者吧,你的支持就是別人的動力來源]
本文連接  
檢閱個人資料  訪問主頁  發私人訊息  Blog  快速回覆 新增/修改 爬文標記
innova
銀驢友〔高級〕
等級: 14等級: 14等級: 14等級: 14


十週年紀念徽章(五級)  

今日心情

 . 積分: 916
 . 文章: 2714
 . 收花: 7188 支
 . 送花: 1461 支
 . 比例: 0.2
 . 在線: 2182 小時
 . 瀏覽: 15142 頁
 . 註冊: 6936
 . 失蹤: 5
 . 火星
#2 : 2018-1-25 04:22 PM     只看本作者 引言回覆

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

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



[如果你喜歡本文章,就按本文章之鮮花~送花給作者吧,你的支持就是別人的動力來源]
本文連接  
檢閱個人資料  訪問主頁  發私人訊息  Blog  快速回覆 新增/修改 爬文標記
H.T.DEMON
論壇第一呆
等級: 11等級: 11等級: 11等級: 11
天堂的惡魔

 . 積分: 321
 . 文章: 2497
 . 收花: 1170 支
 . 送花: 629 支
 . 比例: 0.54
 . 在線: 2355 小時
 . 瀏覽: 24805 頁
 . 註冊: 7960
 . 失蹤: 35
#3 : 2018-1-26 01:03 AM     只看本作者 引言回覆

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



[如果你喜歡本文章,就按本文章之鮮花~送花給作者吧,你的支持就是別人的動力來源]
本文連接  
檢閱個人資料  訪問主頁  發私人訊息  Blog  快速回覆 新增/修改 爬文標記
ROACH
版主
等級: 30等級: 30等級: 30等級: 30等級: 30等級: 30等級: 30等級: 30
減肥中!請勿餵食

十週年紀念徽章(四級)  

 . 積分: 15118
 . 精華: 14
 . 文章: 11766
 . 收花: 140844 支
 . 送花: 6005 支
 . 比例: 0.04
 . 在線: 8869 小時
 . 瀏覽: 85616 頁
 . 註冊: 7973
 . 失蹤: 3
 . 鄉下地方
#4 : 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 作了最後編輯]



[如果你喜歡本文章,就按本文章之鮮花~送花給作者吧,你的支持就是別人的動力來源]
本文連接  
檢閱個人資料  訪問主頁  發私人訊息  Blog  快速回覆 新增/修改 爬文標記

   

快速回覆
表情符號

更多 Smilies

字型大小 : |||      [完成後可按 Ctrl+Enter 發佈]        

溫馨提示:本區開放遊客瀏覽。
選項:
關閉 URL 識別    關閉 表情符號    關閉 Discuz! 代碼    使用個人簽名    接收新回覆信件通知
發表時自動複製內容   [立即複製] (IE only)


 



所在時區為 GMT+8, 現在時間是 2024-3-29 05:17 PM
清除 Cookies - 連絡我們 - TWed2k © 2001-2046 - 純文字版 - 說明
Discuz! 0.1 | Processed in 0.017645 second(s), 6 queries , Qzip disabled