如何使用jSignature实现绘制时lineWidth=1且获取粗签名？

Got it, let's tackle this jSignature issue you're facing. You want to draw with a crisp thin line (lineWidth=1) but get a bold signature output, and adjusting the lineWidth directly to 2/3 caused blurry lines or horizontal artifacts—totally frustrating, I’ve been there!

1. Keep Drawing Thin, Post-Process the Exported Data #

The cleanest fix is to leave your drawing line width at 1 (so you get sharp, artifact-free strokes) and modify the exported signature data to render as bold when you need it. This avoids the rendering glitches that come with increasing the drawing line width directly.

Step-by-step implementation: #

• First, initialize jSignature with your desired thin line width:

  $('#signature-container').jSignature({
    lineWidth: 1,
    // Add any other custom options you're using here
  });
  

• When you're ready to get the bold signature, export to SVG (easy to manipulate) and adjust the stroke width in the output:

  // Grab the raw SVG data from the signature pad
  const rawSvg = $('#signature-container').jSignature('getData', 'svg');
  // Replace the thin stroke width with your desired bold value
  const boldSvg = rawSvg.replace(/stroke-width="1"/g, 'stroke-width="3"');
  // Now boldSvg holds your crisp bold signature—use it to display, save, or print
  

2. Alternative: Modify Native Stroke Data #

If you prefer working with jSignature's native data format instead of SVG, you can adjust the stroke width values directly in the exported stroke points:

// Get the native stroke data (array of strokes, each with point arrays)
const nativeStrokes = $('#signature-container').jSignature('getData', 'native');
// Iterate through each stroke and update the width value
const boldNativeStrokes = nativeStrokes.map(stroke => {
  return stroke.map(point => {
    // jSignature's native points are [x, y, pressure, width] (width may be optional)
    if (point.length >= 4) {
      point[3] = 3; // Set your target bold width here
    } else {
      point.push(3); // Add width if it doesn't exist
    }
    return point;
  });
});
// You can either re-import this modified data to preview or export it to SVG/image
$('#signature-container').jSignature('setData', boldNativeStrokes, 'native');
const finalBoldSvg = $('#signature-container').jSignature('getData', 'svg');

3. Why This Fixes Your Artifact Problem #

When you increase the drawing lineWidth directly, jSignature's real-time renderer can struggle with consistent stroke rendering (especially with non-stylus input like mice), leading to those weird horizontal lines or blurry edges. By drawing thin first and scaling up the stroke in post-processing, you bypass that rendering limitation entirely—you get the best of both worlds: sharp drawing and bold output.

Pro Tip: If you want to show the bold signature as the user draws, you can set up two containers: one hidden for drawing (with lineWidth=1) and one visible that updates with the post-processed bold SVG every time the stroke changes.

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