Содержание
Подписи важны как для юридической идентификации, так и для личного выражения. В какой форме ваша подпись принимает, может отправить сообщение о вашем отношении, личности и должности.
В цифровом мире графическое представление подписи требуется во многих средах, и как разработчик вы можете быть готовы к каждому безумию, которое может потребовать ваш клиент. В этой статье вы узнаете, как реализовать простую подписную панель в Cordova с помощью canvas.
Требования
Для достижения нашей цели мы собираемся использовать библиотеку подписи. Signature Pad — это библиотека JavaScript для рисования гладких подписей. Он основан на холсте HTML5 и использует интерполяцию кривой Безье с переменной шириной на основе гладких сигнатур. Он работает во всех современных настольных и мобильных браузерах и не зависит от каких-либо внешних библиотек.
Реализация
Для начала добавьте ссылку на скрипт панели подписи в ваш документ с тегом script:
Теперь добавьте базовую разметку, которая нужна нашему приложению для работы. Мы добавим холст, на котором будет работать библиотека, кроме двух кнопок для выполнения действия экспорта и сброса и тега изображения для предварительного просмотра dataURL подписи.
![]()
Замечания: как вы можете видеть, холст еще не имеет определенного размера (высоты или ширины). Мы будем использовать javascript, чтобы указать его размеры, такие как ширина устройства и третья часть высоты устройства.
Смысл использования библиотеки состоит в том, чтобы забыть о том, как будет отображаться путь на холсте, чтобы исправить путь, чтобы предотвратить любую пиксельную подпись. Кроме того, библиотека панели подписи проста в использовании и позволяет изменять многие базовые функции, которые могут вам понадобиться.
Следующий код должен дать холсту его размеры и инициализировать на нем панель подписи. Помните, что существует множество доступных методов и опций, которые можно изменить при его инициализации, вы можете читать больше о в хранилище.
var canvas = document.getElementById("signature");
var w = window.innerWidth;
var h = window.innerHeight;
// As the canvas doesn't has any size, we'll specify it with JS
// The width of the canvas will be the width of the device
canvas.width = w;
// The height of the canvas will be (almost) the third part of the screen height.
canvas.height = h/2.5;
var signaturePad = new SignaturePad(canvas,{
dotSize: 1
});
document.getElementById("export").addEventListener("click",function(e){
// Feel free to do whatever you want with the image
// as export to a server or even save it on the device.
var imageURI = signaturePad.toDataURL();
document.getElementById("preview").src = imageURI;
},false);
document.getElementById("reset").addEventListener("click",function(e){
// Clears the canvas
signaturePad.clear();
},false); toDataURL метод панели подписи вернет base64 URL изображения, вы можете использовать его для создания файла изображения на устройстве или отправьте его на свой сервер и создайте изображение там.
И ты будешь готов к работе. Вы можете добавить различные прослушиватели событий в документ в качестве изменения ориентации или события изменения размера, чтобы изменить размеры вашего холста.
Заключение
С Signaturepad.js нам не нужно беспокоиться о том, как будет рисоваться линия на холсте или как пользователь перемещает сенсорное перо (или палец) в экран.
Помните, что хотя панель для подписи хорошо работает с пальцем, использование сенсорного пера рекомендуется для улучшения работы пользователя.
Повеселись .
