RSS   



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


 


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

十週年紀念徽章(四級)  

 . 積分: 14808
 . 精華: 14
 . 文章: 11547
 . 收花: 137873 支
 . 送花: 5828 支
 . 比例: 0.04
 . 在線: 8667 小時
 . 瀏覽: 81636 頁
 . 註冊: 6046
 . 失蹤: 0
 . 鄉下地方
#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


十週年紀念徽章(五級)  

今日心情

 . 積分: 887
 . 文章: 2650
 . 收花: 6940 支
 . 送花: 1351 支
 . 比例: 0.19
 . 在線: 2127 小時
 . 瀏覽: 13342 頁
 . 註冊: 5009
 . 失蹤: 18
 . 火星
#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
天堂的惡魔

 . 積分: 320
 . 文章: 2497
 . 收花: 1164 支
 . 送花: 623 支
 . 比例: 0.54
 . 在線: 2352 小時
 . 瀏覽: 23925 頁
 . 註冊: 6033
 . 失蹤: 52
#3 : 2018-1-26 01:03 AM     只看本作者 引言回覆

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



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

十週年紀念徽章(四級)  

 . 積分: 14808
 . 精華: 14
 . 文章: 11547
 . 收花: 137873 支
 . 送花: 5828 支
 . 比例: 0.04
 . 在線: 8667 小時
 . 瀏覽: 81636 頁
 . 註冊: 6046
 . 失蹤: 0
 . 鄉下地方
#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, 現在時間是 2018-12-19 03:19 PM
清除 Cookies - 連絡我們 - TWed2k © 2001-2046 - 純文字版 - 說明
Discuz! 0.1 | Processed in 0.022583 second(s), 7 queries , Qzip disabled