创建后获取SignaturePad实例的引用

Question

我有代码可以在一个页面上生成多个签名板，并在此过程中为它们提供唯一的 ID。我希望能够在处理按钮单击时通过循环遍历画布元素来执行单独的signaturePad.toDataURL() 和调用以及signaturePad.isEmpty() 检查。我还想根据需要执行单个signaturePad.clear() 函数。

我无法弄清楚如何引用附加到给定画布元素的签名板实例。

为了清除签名，我已经尝试过

$("body").on("click", ".signature-clear", function() {
 var canvas = document.getElementById($(this).closest('.canvas-wrap').find('canvas').attr('id'));
 var signaturePad = canvas.signaturePad();
});

但是，尽管画布元素被正确定位，我还是得到了

canvas.signaturePad

不是函数错误。

我相信这会很简单

PS：我知道我可以再做一次

new SignaturePad(canvas)

来清除记事本，但这很笨重（在我看来），并且不能帮助我保存签名或检查它们是否已签名。

仅供参考，它们的设置如下：

$(".signature-pad").each(function () {
  var canvas = document.getElementById($(this).attr('id'));
  var signaturePad = new SignaturePad(canvas);
});

更新：

我决定尝试仅使用画布元素本身来附加签名板功能，结果非常令人困惑。

var canvas = document.getElementById($jq(this).closest('.canvas-wrap').find('canvas').attr('id'));
var signature = canvas.toDataURL();

奇怪的是，

toDataURL()

有效！然而，isEmpty() 和clear() 却没有。查看该元素的控制台，会列出一个 HTMLCanvasElementPrototype 原型，它提到了一些函数（包括 toDataURL() 和其他函数，但不是 Doco 中提到的完整集合。

isEmpty()

对于工作来说非常关键。

奇怪...

Answer 1

您可以创建一个全局变量，用于在创建签名板时存储所有签名板。

const signaturePads = {}; // global object to store {"id1": ref1, "id2": ref2, etc}

$(".signature-pad").each(function () {
  // the next line is a very roundabout way of doing var canvas = this; (or possibly this[0])
  var canvas = document.getElementById($(this).attr('id'));
  var signaturePad = new SignaturePad(canvas);
  // store canvasId: sigpad in global var
  signaturePads[canvas.id] = signaturePad;
});

稍后，当你有了画布的 id 并想要签名板时

const sigPad = signaturePads[myCanvasId];
sigPad.clear();