如何获取已创建的SignaturePad实例以调用其相关API方法

我完全懂你的困扰——创建了一堆签名板实例，之后却找不到它们来调用isEmpty()、clear()这些关键方法，确实让人头疼。其实问题的核心在于你初始化实例时，没有把这些实例和对应的canvas元素关联起来，导致后续没法通过canvas找到对应的实例。下面给你两个简单可行的解决方案：

方案一：把实例挂载到canvas元素的自定义属性上 #

修改你的初始化代码，创建SignaturePad实例后，直接把它存到canvas的自定义属性里：

$(".signature-pad").each(function () {
  var canvas = this; // 当前遍历的元素就是canvas，直接用this更简洁
  var signaturePad = new SignaturePad(canvas);
  // 将实例绑定到canvas的自定义属性上
  canvas.signaturePadInstance = signaturePad;
});

之后当你需要调用方法时，比如点击清除按钮：

$("body").on("click", ".signature-clear", function() {
  // 找到对应的canvas DOM元素（注意要取[0]拿到原生元素，不是jQuery对象）
  var canvas = $(this).closest('.canvas-wrap').find('canvas')[0];
  // 获取之前存储的SignaturePad实例
  var signaturePad = canvas.signaturePadInstance;
  
  // 现在就能正常调用所有实例方法了
  signaturePad.clear();
  console.log("签名是否为空：", signaturePad.isEmpty());
  var signatureData = signaturePad.toDataURL();
  // 处理签名数据...
});

方案二：用全局对象存储实例（按canvas ID映射） #

如果不想修改canvas元素本身，也可以创建一个全局对象，以canvas的ID为键来存储对应的实例：

// 全局对象，用于存储所有SignaturePad实例
var signaturePadMap = {};

$(".signature-pad").each(function () {
  var canvas = this;
  var signaturePad = new SignaturePad(canvas);
  // 用canvas的ID作为键，把实例存到全局对象里
  signaturePadMap[canvas.id] = signaturePad;
});

调用方法时通过ID查找实例：

$("body").on("click", ".signature-clear", function() {
  var canvasId = $(this).closest('.canvas-wrap').find('canvas').attr('id');
  var signaturePad = signaturePadMap[canvasId];
  
  signaturePad.clear();
  // 其他方法调用同理
});

关于你遇到的奇怪现象解释 #

你提到直接调用canvas.toDataURL()能成功，但isEmpty()和clear()不行，这是因为：

• toDataURL()是HTMLCanvasElement原生自带的方法，所以不管有没有SignaturePad实例，canvas本身都能调用它；
• 而isEmpty()、clear()是SignaturePad类实例特有的方法，canvas原生对象并没有这些方法，必须拿到对应的SignaturePad实例才能调用。

至于你说的“重新new一个SignaturePad来清除”的方式，确实不够优雅——新创建的实例和原来的不是同一个，不仅可能丢失之前的签名状态，多次创建还可能带来不必要的内存开销，复用原来的实例才是更合理的做法。

备注：内容来源于stack exchange，提问作者Dave Spencer