用canvas實現手寫簽名功能
最近開發網站有一個需求,要求頁面上有一塊區域,使用者能用滑鼠在上面寫字,並能儲存成圖片 base64 碼放在伺服器。
這樣的需求用 canvas 實現是最好的。
需要用到 canvas 的以下幾個屬性:
- beginPath 建立一個新的路徑
- globalAlpha 設定圖形和圖片透明度的屬性
- lineWidth 設定線段厚度的屬性(即線段的寬度)
- strokeStyle 描述畫筆(繪製圖形)顏色或者樣式的屬性,預設值是 #000 (black)
- moveTo(x, y)將一個新的子路徑的起始點移動到(x,y)座標的方法
- lineTo(x, y) 使用直線連線子路徑的終點到x,y座標的方法(並不會真正地繪製)
- closePath 它嘗試從當前點到起始點繪製一條直線
- stroke 它會實際地繪製出通過 moveTo() 和 lineTo() 方法定義的路徑,預設顏色是黑色
除了用到這些屬性外,還需要監聽滑鼠點選和滑鼠移動事件。
我對程式碼做了擴充套件,除了支援畫筆,還支援噴槍、刷子、橡皮擦功能。
canvas 轉成圖片
將 canvas 轉在圖片,需要用到以下屬性:
- toDataURL
canvas.toDataURL() 方法返回一個包含圖片展示的 data URI 。可以使用 type 引數其型別,預設為 PNG 格式。圖片的解析度為96dpi。
const image = new Image() // canvas.toDataURL 返回的是一串Base64編碼的URL image.src = canvas.toDataURL("image/png")