jquery signfield 在 iPad 上只允许一行答案

【问题标题】：jquery signfield only allows one line on iPadjquery signfield 在 iPad 上只允许一行
【发布时间】：2016-12-02 15:43:50
【问题描述】：

我需要在表单上添加一个签名字段，用于在 iPad 上签署文档。

我需要一个允许在同一个表单上输入多个签名的插件。

我发现这个 jQuery 插件“signfield”非常好用……

但它有一个大问题！

在桌面版 firefox、safari 等上，效果很好。

在 iPad 上，它一次只允许您绘制一条线 - 如果您抬起手指然后尝试绘制另一条线，画布就会清空！

如果你的签名可以画成一条连续的线就好了，但那不太可能！

在桌面 safari 上它可以正常工作 - 你可以画很多线。但在移动 safari 上就存在这个问题。

问题出现在演示中，所以这是插件的问题，而不是我的实现问题。

救命！！

【问题讨论】：

我将 jSignature 库用于此类项目。看看这个。 willowsystems.github.io/jSignature/#/about
这个插件看起来不错，但是如何将它添加到表单中，以便它与表单一起提交数据？
我让它为许多表单工作，它适用于任何设备和浏览器。这取决于您的需求以及您希望如何存储签名等。我实际上将签名转换为 base64 字符串并将其存储在数据库中。然后在需要时将其转换回显示。我需要加密存储，而该任务不允许存储在文件系统中。您想在提交时对图像做什么。我编写了几个函数来与基础库一起获得我想要的一切，并覆盖它的一些默认行为以满足我的确切需求。
只需要提交base64字符串作为表单字段，连同表单的其余部分。
库有一个内置函数“getData”，它会给你你的base64字符串来保存。例如：return $("#signature").jSignature("getData", "image");

【解决方案1】：

对于 jSignature：

请记住，我已经对库进行了一些修改，以便我也可以在画布上打印文本，以便说明他们同意的内容（我已从下面的代码中删除了我的客户代码以显示更多基础库的原始示例）

HTML：

<div id="signature"></div>

JS：

初始化签名：

$("#signature").jSignature({ color: "#000000", "decor-color": "#000000", lineWidth: 2);

检查是否至少执行了一次中风

if ($("#signature").jSignature('getData', 'native', '', '').length === 0) {
    // user has not signed
} else {
    // user has signed
}

获取签名图片base64字符串：

model.getSignatureData = function () {
    return $("#signature").jSignature("getData", "image");
}

为签名base64值设置observable：

model.SignatureValue(model.getSignatureData()[1]);

然后我只需将我发布到我的 API 的 JSON 中的签名值属性传递给我的 API

【讨论】：