Chụp chữ ký bằng canvas HTML5 và lưu vào cơ sở dữ liệu dưới dạng hình ảnh

Trong hướng dẫn này, tôi chỉ cho bạn một số plugin jQuery bằng cách sử dụng chúng, bạn có thể nắm bắt chữ ký người dùng trên trang web của mình

Tôi thảo luận về các plugin sau với một ví dụ –

• jChữ ký
• Bảng chữ ký
• Chữ ký giao diện người dùng jQuery

Họ thêm một vùng chứa trên trang web nơi người dùng có thể vẽ chữ ký của mình bằng con trỏ chuột

Tải xuống

---

nội dung

1. jChữ ký
2. Bảng chữ ký
3. Chữ ký giao diện người dùng jQuery
4. Sự kết luận

---

1. jChữ ký

Dưới đây là một số bước để bao gồm plugin này –

bước

• Tải xuống plugin jSignature và bao gồm các tập lệnh sau –

Bạn cần bao gồm tập lệnh

5 cho IE phiên bản cũ hơn

• Tạo phần tử vùng chứa

• Đang khởi tạo
  6 trên container

$("#signature").jSignature({'UndoButton':true});

Thí dụ

Trong ví dụ này, tôi đang hiển thị bản xem trước hình ảnh của chữ ký khi nút được nhấp vào

• Tạo phần tử
  7

________số 8

• Khởi tạo
  8 trên canvas

0

Thí dụ

Hiển thị bản xem trước chữ ký khi nhấp vào nút xem trước

1

Xem bản trình diễn

---

3. Chữ ký giao diện người dùng jQuery

Plugin này sử dụng thư viện giao diện người dùng jQuery và mô-đun chuột để vẽ chữ ký. Bạn có thể lấy thư viện này từ đây

bước

• Đầu tiên, bao gồm thư viện giao diện người dùng jQuery trên trang của bạn với jQuery

2

• Bao gồm
  9 và

  $("#signature").jSignature({'UndoButton':true});

  0

5

• Để bật cảm ứng trên thiết bị, bạn cần bao gồm

  $("#signature").jSignature({'UndoButton':true});

  1

0

• Bạn cần bao gồm

  $("#signature").jSignature({'UndoButton':true});

  2 cho các phiên bản IE cũ hơn

1

• Tạo phần tử vùng chứa

• Khởi tạo chữ ký trên vùng chứa

3

Thí dụ

Hiển thị bản xem trước chữ ký khi nhấp vào nút xem trước

4

Xem bản trình diễn

---

4. Kết luận

Trong phần minh họa, tôi sẽ chỉ cho bạn một số ví dụ đơn giản sử dụng plugin jQuery mà bạn có thể dễ dàng triển khai trong dự án của mình và bạn có thể lưu giá trị được tạo trong bảng cơ sở dữ liệu của mình để sử dụng sau hoặc tải xuống dưới dạng hình ảnh

Bạn có thể tìm hiểu thêm về các plugin này và nhiều tính năng khác từ tài liệu và ví dụ của chúng