在Cordova中使用JavaScript创建签名板

本文概述

要求
实现
总结

签名对于合法身份识别和个人表达都很重要。你签名的形式可能会发送有关你的态度, 个性和地位的信息。

在数字世界中, 签名的图形表示在许多环境中都是必需的, 作为开发人员, 你可以为客户可能遇到的每一次疯狂做好准备。在本文中, 你将学习如何使用画布在cordova中实现简单的签名板。

要求

为了实现我们的目标, 我们打算使用签名板库。 Signature Pad是一个JavaScript库, 用于绘制平滑的签名。它基于HTML5画布, 并基于”平滑器签名”使用可变宽度的贝塞尔曲线插值。它适用于所有现代台式机和移动浏览器, 并且不依赖于任何外部库。

你可以在此处的Github官方存储库中获取缩小的文件。

实现

首先, 请使用script标签在文档中添加对签名板脚本的引用：

<script type="text/javascript" src="js/signature_pad.min.js"></script>

现在添加需要我们的应用程序运行的基本标记。除了将执行导出和重置操作的两个按钮以及用于预览签名的dataURL的图像标签之外, 我们还将添加一个画布, 库将在其中运行。

<canvas id="signature" style="border: 1px solid black;"></canvas>
<img id="preview" />
<br>
<div style="text-align:center;">
    <input type="button" id="export" value="Export"/>
    <input type="button" id="reset" value="Reset"/>
</div>

注意：如你所见, 画布还没有任何特定尺寸(高度或宽度)。我们将使用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, 你可以使用它在设备上创建图像文件(在此处了解如何将base64图像保存到设备中的cordova中)或将其发送到服务器, 并在此处创建图像。

然后你就可以开始了。你可以在文档中添加不同的事件侦听器, 以改变方向或调整大小事件以更改画布的尺寸。