Bất cứ ai biết làm thế nào điều này có thể được thực hiện? Bạn sẽ sử dụng một đối tượng canvas, svg, jQuery, v.v?
Chụp chữ ký bằng HTML5 và iPad
Câu trả lời:
Đây là một phiên bản dựa trên khung vẽ khác với các đường cong có chiều rộng thay đổi (dựa trên tốc độ vẽ): bản demo tại http://szimek.github.io/signature_pad và mã tại https://github.com/szimek/signature_pad .
1
Cảm ơn trước, lib chữ ký js tốt nhất tôi từng thấy. Không biết tại sao câu trả lời này chỉ có 3 phiếu. github.com/szimek/signature_pad
—
VAdaihiep
Tôi thích điều này không phụ thuộc vào các thư viện js khác và nó trông như thế nào. Một lưu ý về việc sử dụng nó đã giúp tôi: thêm một đường viền vào khung vẽ để bạn có thể thấy nó đang được điều chỉnh như thế nào. Cũng lưu ý rằng css thay đổi đối với khung vẽ làm một số điều điên rồ, vì vậy chỉ cần chỉ định chiều cao và chiều rộng trong thành phần vải nếu điều này vượt khỏi tầm kiểm soát.
—
Brian McGinity
Jake, chính xác thì thiếu gì theo ý kiến của bạn trong tài liệu được cung cấp trong tệp README? Tôi mở để đề xuất làm thế nào để cải thiện nó.
—
szimek
Tôi xin lỗi. Tôi nghĩ rằng tài liệu của bạn là thực sự đầy đủ. Nó dường như bị hạn chế cho đến khi tôi nhận ra việc sử dụng nó dễ dàng như thế nào. Tôi đã thực hiện nó đầy đủ trong một biểu mẫu, lưu trữ trong cơ sở dữ liệu và truy xuất trở lại trang dưới một giờ. Tôi cho rằng, tôi đã so sánh nó với các thư viện phức tạp hơn nhiều để sử dụng như câu trả lời đã chọn ở trên. Tôi đã không làm việc với các URI dữ liệu trước đây, nhưng đó là một cách thực sự tuyệt vời để xử lý việc lưu trữ dữ liệu. Vì vậy, tôi chỉ cần phải thích nghi với những thứ đó và sau đó lưu trữ và truy xuất trong cơ sở dữ liệu rất ... dễ dàng ... wow. Cảm ơn một lần nữa!
—
Jake
@RonaldinhoLearnCoding kiểm tra tệp README - có một danh sách tất cả các tùy chọn có thể. Người bạn đang tìm kiếm được gọi là "penColor".
—
szimek
Một phần tử canvas với một số JavaScript sẽ hoạt động tốt.
Trong thực tế, Signature Pad (một plugin jQuery) đã thực hiện điều này.
Tôi ngạc nhiên khi thấy plugin này đẹp như thế nào.
—
Gourneau
Rất hoàn hảo! Cám ơn vì đã chia sẻ!
—
sagescrub
Tôi thấy plugin này thực sự khó sử dụng một cách không chính thức. Tất cả các bản demo rất cụ thể và phức tạp để áp dụng. Chắc chắn giống như cách tiếp cận pad chữ ký khác tốt hơn: stackoverflow.com/a/17200715/76672 Với khá nhiều tài liệu, tôi đã có thể làm cho nó hoạt động ...
—
Jake
Đây là một phiên bản hack nhanh chóng bằng cách sử dụng SVG tôi vừa làm. Hoạt động tốt cho tôi trên iPhone của tôi. Cũng hoạt động trong một trình duyệt máy tính để bàn bằng cách sử dụng các sự kiện chuột bình thường.
Tôi muốn biết làm thế nào để vẽ chữ ký đã lưu
—
Yuri Morales
Làm cách nào để lưu chữ ký dưới dạng tệp png hoặc hiển thị chữ ký theo cách khác?
—
Andrus
Có lẽ hai công nghệ trình duyệt tốt nhất cho điều này là Canvas, với Flash là bản sao lưu.
Chúng tôi đã thử VML trên IE để sao lưu cho Canvas, nhưng nó chậm hơn Flash rất nhiều. SVG đã chậm hơn sau đó tất cả phần còn lại.
Với jSignature ( http://willowsystems.github.com/jSignature/ ), chúng tôi đã sử dụng Canvas làm chính, với dự phòng cho trình giả lập Canvas dựa trên Flash (FlashCanvas) cho IE8 trở xuống. Id 'nói đã làm việc rất tốt cho chúng tôi.
Điều này thực sự tốt ... Tôi thích hiệu ứng làm mịn của nó. Tốt nhất tôi từng thấy.
—
Camden S.
Các tùy chọn đã được liệt kê là rất tốt, tuy nhiên ở đây một vài chi tiết về chủ đề này mà tôi đã nghiên cứu và tìm thấy.
1) http://perfectionkills.com/exploring-canvas-drawing-t kỹ thuật /
2) http://mcc.id.au/2010/signature.html
3) https://zipso.net/a-simple-touchscreen -sketchpad-used-javascript-and-html5 /
Và như mọi khi bạn có thể muốn lưu canvas vào hình ảnh:
http://www.html5canvastutorials.com/advified/html5-canvas-save-drawing-as-an-image/
chúc may mắn và ký kết vui vẻ
Một trường chữ ký OpenSource khác là https://github.com/applicius/jquery.signfield/ , plugin jQuery đã đăng ký bằng Sketch.js.