用canvas實現手寫簽名功能

iamyoung001 發布于2019-08-23 17:05 / 1306人閱讀

摘要：更多文章最近開發網站有一個需求，要求頁面上有一塊區域，用戶能用鼠標在上面寫字，并能保存成圖片碼放在服務器。這樣的需求用實現是最好的。我對代碼做了擴展，除了支持畫筆，還支持噴槍刷子橡皮擦功能。可以使用參數其類型，默認為格式。返回的是一串編碼的

更多文章

最近開發網站有一個需求，要求頁面上有一塊區域，用戶能用鼠標在上面寫字，并能保存成圖片 base64 碼放在服務器。
這樣的需求用 canvas 實現是最好的。
需要用到 canvas 的以下幾個屬性：

beginPath 創建一個新的路徑

globalAlpha 設置圖形和圖片透明度的屬性

lineWidth 設置線段厚度的屬性（即線段的寬度）

strokeStyle 描述畫筆（繪制圖形）顏色或者樣式的屬性，默認值是 #000 (black)

moveTo(x, y) 將一個新的子路徑的起始點移動到(x，y)坐標的方法

lineTo(x, y) 使用直線連接子路徑的終點到x，y坐標的方法（并不會真正地繪制）

closePath 它嘗試從當前點到起始點繪制一條直線

stroke 它會實際地繪制出通過 moveTo() 和 lineTo() 方法定義的路徑，默認顏色是黑色

除了用到這些屬性外，還需要監聽鼠標點擊和鼠標移動事件。

廢話就不多說了，直接上代碼和 DEMO。

我對代碼做了擴展，除了支持畫筆，還支持噴槍、刷子、橡皮擦功能。

canvas 轉成圖片

將 canvas 轉成圖片，需要用到以下屬性：

toDataURL

canvas.toDataURL() 方法返回一個包含圖片展示的 data URI 。可以使用 type 參數其類型，默認為 PNG 格式。圖片的分辨率為96dpi。

    const image = new Image()
    // canvas.toDataURL 返回的是一串Base64編碼的URL
    image.src = canvas.toDataURL("image/png")

GPU云服務器云服務器 java比對手寫簽名 html 5手寫簽名用js實現連帶功能用php實現聊天功能

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103777.html

匠心打造canvas簽名組件

摘要：原文匠心打造簽名組件導讀月又是項目吃緊的時候，一大波需求襲來，猝不及防。可以先戳這里體驗把后面將要提到的簽名組件。剩下的也是綁定事件中關鍵的一步。設置完成了上述功能，一個簽名插件就已經成型了。本文首發于CSDN網站，下面的版本又經過進一步的修訂。原文：匠心打造canvas簽名組件導讀 6月又是項目吃緊的時候，一大波需求襲來，猝不及防。度過了漫長而煎熬的6月，是時候總結一波。最近移...

MAX_zuo 2019-08-20 17:53 評論0 收藏0
小程序有關手寫板簽名具體代碼

　　本文主要為大家講述在小程序中實現手寫板簽名的具體代碼，下面看看具體內容：　　1.wxss代碼　　page{ 　　background:#F8F8F8; 　　} 　　/*簽名*/ 　　.qianming{ 　　background:#fff; 　　padding:20rpx30rpx; 　　font-size:32rpx; 　　color:#333; 　　padding-bottom:0; 　　...

3403771864 2023-03-26 17:27 評論0 收藏0
使用vue完成微信公眾號網頁小記

摘要：前言公司最近有一個頁面的功能，比較簡單的一個調查表功能，嵌套在我們微信公眾號里面。同時用到了微信的登錄和分享接口。參考鏈接使用微信接口前端部分我們用微信接口主要是做的登錄和分享功能，首先是上微信公眾平臺上邊看看，把權限搞好之后后端配置。 showImg(https://segmentfault.com/img/bVbrOkH); 前言：公司最近有一個H5頁面的功能，比較簡單的一個調查...

phoenixsky 2019-08-02 16:14 評論0 收藏0