使用Signature Pad时空白Canvas提交为何生成非空Base64值？

问题描述 #

我在表单中使用Signature Pad脚本获取签名，前端代码如下：

<div id="signature-pad" class="signature-pad">
    <div class="signature-pad--body">
      <canvas></canvas>
    </div>
</div>
<input type="hidden" name="hiddenSignature" id="hiddenSignature" />

提交表单时执行的JS代码：

var dataURL = signaturePad.toDataURL();
$("#hiddenSignature").val(signaturePad.toDataURL("image/png").replace("data:image/png;base64,", ""));

服务器端获取hiddenSignature字段值时，发现无签名的空白Canvas会返回一段Base64值（已验证该值对应空白画布），疑惑为何此字段值不为空？

原因 #

Signature Pad的toDataURL()方法本质是把当前画布的内容转成Base64编码的图片。哪怕画布是空的，它也是一张合法的PNG图片（一般是透明或纯色背景的空白图），所以方法会输出这张空白图的Base64值，不会返回空字符串。

解决办法 #

如果需要无签名时让hiddenSignature为空，提交前先判断画布是否有绘制内容就行：

方法1：用Signature Pad内置的isEmpty()方法 #

多数版本的Signature Pad都自带这个API，直接判断即可：

// 提交表单前执行
if (signaturePad.isEmpty()) {
  $("#hiddenSignature").val("");
} else {
  $("#hiddenSignature").val(signaturePad.toDataURL("image/png").replace("data:image/png;base64,", ""));
}

方法2：自定义判断画布像素（兼容旧版本） #

如果你的Signature Pad版本没有isEmpty()，可以自己检查画布的像素数据：

// 自定义判断空白画布的函数
function isCanvasEmpty(canvas) {
  const ctx = canvas.getContext('2d');
  const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  // 遍历像素的alpha通道，判断是否有非透明像素
  for (let i = 3; i < imgData.data.length; i += 4) {
    if (imgData.data[i] !== 0) {
      return false;
    }
  }
  return true;
}

// 提交时使用
const canvas = document.querySelector('#signature-pad canvas');
if (isCanvasEmpty(canvas)) {
  $("#hiddenSignature").val("");
} else {
  $("#hiddenSignature").val(signaturePad.toDataURL("image/png").replace("data:image/png;base64,", ""));
}

内容的提问来源于stack exchange，提问作者kneidels