signature-pad插件窗口resize异常及空签名检测相关咨询

Hey there, let's tackle these signature-pad issues one by one—they're common pitfalls, so you're not alone!

Fixing Resize-Related Signature Loss & Offset #

Why this happens #

Every time you resize the window and call resizeCanvas() directly, you're resetting the canvas without preserving existing signature data. Plus, if you don't sync the canvas's internal width/height properties with its CSS dimensions, you'll get stretching and offset issues.

The fix #

1. Debounce the resize event: Prevent excessive calls to resizeCanvas when the user drags the window edge.
2. Save and restore signature data: Capture the current signature as a data URL before resizing, then restore it afterward.
3. Account for device pixel ratio: This keeps signatures sharp after resizing.

Here's your adjusted code:

// Initialize your signature pad first (confirm this is set up correctly)
const signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
  // Add your config options here (e.g., pen color, thickness)
});

let signatureBackup = null;
let resizeDebounceTimeout;

function resizeCanvas() {
  // Save current signature if it exists
  if (signaturePad && !signaturePad.isEmpty()) {
    signatureBackup = signaturePad.toDataURL();
  }

  const canvas = signaturePad._canvas;
  // Get the canvas's displayed size from CSS
  const displayWidth = canvas.offsetWidth;
  const displayHeight = canvas.offsetHeight;

  // Scale canvas for high-DPI screens
  const ratio = window.devicePixelRatio || 1;
  canvas.width = displayWidth * ratio;
  canvas.height = displayHeight * ratio;
  canvas.getContext('2d').scale(ratio, ratio);

  // Restore the signature if we saved it
  if (signatureBackup) {
    signaturePad.fromDataURL(signatureBackup);
    // Clear backup if restored signature is empty (avoids stale data)
    if (signaturePad.isEmpty()) {
      signatureBackup = null;
    }
  }
}

// Debounce resize to avoid overwhelming the browser
$(window).resize(function() {
  clearTimeout(resizeDebounceTimeout);
  resizeDebounceTimeout = setTimeout(resizeCanvas, 200); // Adjust delay as needed
});

Fixing isEmpty() Function Failure #

The built-in isEmpty() can fail if there are invisible/transparent pixels left on the canvas (e.g., accidental tiny clicks, resize artifacts). A reliable workaround is to manually check for non-transparent pixels:

function checkIfSignatureIsEmpty(signaturePad) {
  const canvas = signaturePad._canvas;
  const ctx = canvas.getContext('2d');
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const pixelData = imageData.data;

  // Check every pixel's alpha channel (4th value in RGBA array)
  for (let i = 3; i < pixelData.length; i += 4) {
    if (pixelData[i] !== 0) { // Pixel isn't fully transparent
      return false;
    }
  }
  return true;
}

// Usage example before saving
if (checkIfSignatureIsEmpty(signaturePad)) {
  alert("Please provide a valid signature!");
  return;
}

Detecting Empty Signatures on PHP Side #

To validate signatures server-side, check if the image contains any non-transparent pixels. Here's a robust method:

function validateSignatureIsNotEmpty($base64Signature) {
  // Strip the data URI prefix if present
  $base64String = preg_replace('#^data:image/[^;]+;base64,#', '', $base64Signature);
  $imageBinary = base64_decode($base64String);

  // Create a temporary file to process the image
  $tempFilePath = tempnam(sys_get_temp_dir(), 'signature_');
  file_put_contents($tempFilePath, $imageBinary);

  // Get image dimensions
  $imageInfo = getimagesize($tempFilePath);
  $width = $imageInfo[0];
  $height = $imageInfo[1];

  // Load image into GD library
  $image = imagecreatefromstring($imageBinary);
  $isValid = false;

  // Check each pixel for non-transparency
  for ($x = 0; $x < $width; $x++) {
    for ($y = 0; $y < $height; $y++) {
      $pixelColor = imagecolorat($image, $x, $y);
      $alphaChannel = ($pixelColor >> 24) & 0xFF;

      // If alpha isn't 255 (fully transparent), signature exists
      if ($alphaChannel !== 0xFF) {
        $isValid = true;
        break 2; // Exit both loops early
      }
    }
  }

  // Clean up resources
  imagedestroy($image);
  unlink($tempFilePath);

  return $isValid;
}

// Example usage in your form handler
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $signature = $_POST['signature_data'];
  if (!validateSignatureIsNotEmpty($signature)) {
    echo "Error: Empty signature detected. Please sign again.";
    exit;
  }
  // Proceed with saving the signature
}

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