在Cordova中使用JavaScript创建签名板

本文概述

  • 要求
  • 实现
  • 总结
签名对于合法身份识别和个人表达都很重要。你签名的形式可能会发送有关你的态度, 个性和地位的信息。
在数字世界中, 签名的图形表示在许多环境中都是必需的, 作为开发人员, 你可以为客户可能遇到的每一次疯狂做好准备。在本文中, 你将学习如何使用画布在cordova中实现简单的签名板。
要求为了实现我们的目标, 我们打算使用签名板库。 Signature Pad是一个JavaScript库, 用于绘制平滑的签名。它基于HTML5画布, 并基于” 平滑器签名” 使用可变宽度的贝塞尔曲线插值。它适用于所有现代台式机和移动浏览器, 并且不依赖于任何外部库。
你可以在此处的Github官方存储库中获取缩小的文件。
实现首先, 请使用script标签在文档中添加对签名板脚本的引用:
< script type="text/javascript" src="http://www.srcmini.com/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="http://www.srcmini.com/Export"/> < input type="button" id="reset" value="http://www.srcmini.com/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 devicecanvas.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 = http://www.srcmini.com/imageURI; }, false); document.getElementById("reset").addEventListener("click", function(e){// Clears the canvassignaturePad.clear(); }, false);

签名板的toDataURL方法将返回图像的base64 url??, 你可以使用它在设备上创建图像文件(在此处了解如何将base64图像保存到设备中的cordova中)或将其发送到服务器, 并在此处创建图像。
然后你就可以开始了。你可以在文档中添加不同的事件侦听器, 以改变方向或调整大小事件以更改画布的尺寸。
总结使用Signaturepad.js, 我们无需担心线条将如何在画布上绘制或用户如何将触摸笔(或手指)移动到屏幕中。
请记住, 尽管签名板可以很好地与手指配合使用, 但是建议使用触摸笔来改善用户体验。
【在Cordova中使用JavaScript创建签名板】玩得开心 。

    推荐阅读