Topaz Sigweb签名串转Base64：Ionic跨端签名适配方案问询

Hey there! Let's work through this signature format compatibility issue between your Ionic mobile app and Topaz Sigweb web setup. The key thing to realize first is that Topaz's ASCII hex signature data isn't raw image data—it's a binary representation of vector signature points (coordinates, pressure, etc.), which is why converting it directly to Base64 won't give you a valid image. Here are two solid approaches to handle the conversion:

1. Convert Vector Signature Data (Recommended) #

This method preserves the signature as vector points, so it stays crisp at any size and lets you re-render or edit the signature easily on either platform.

Step 1: Parse Topaz's ASCII Hex Data into Signature Points #

Topaz's signature data follows a specific binary structure (check their docs for exact specs, but here's a common implementation):

• The hex string is a hex-encoded binary blob that includes metadata (like point count) followed by each point's X/Y coordinates and pressure value.
• First, convert the hex string to a binary array, then extract the points:

// Convert ASCII hex string to Uint8Array
function hexToUint8Array(hex) {
  const bytes = new Uint8Array(hex.length / 2);
  for (let i = 0; i < hex.length; i += 2) {
    bytes[i / 2] = parseInt(hex.substr(i, 2), 16);
  }
  return bytes;
}

// Parse Topaz signature data into point objects
function parseTopazSignature(hexData) {
  const data = hexToUint8Array(hexData);
  let offset = 0;
  
  // Extract point count (adjust based on Topaz's actual format—this is a common 16-bit unsigned int)
  const pointCount = data[offset++] | (data[offset++] << 8);
  const points = [];

  for (let i = 0; i < pointCount; i++) {
    // Extract X, Y (16-bit each) and pressure (8-bit)
    const x = data[offset++] | (data[offset++] << 8);
    const y = data[offset++] | (data[offset++] << 8);
    const pressure = data[offset++];
    
    points.push({ x, y, pressure });
  }
  
  return points;
}

Step 2: Render Parsed Points on Ionic's Canvas #

Once you have the point array, you can draw the signature on your Ionic Canvas component:

// In your Ionic component
drawSignature(points: {x: number, y: number, pressure: number}[]) {
  const canvas = document.getElementById('signature-canvas') as HTMLCanvasElement;
  const ctx = canvas.getContext('2d');
  if (!ctx) return;

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.strokeStyle = '#000000';
  
  if (points.length === 0) return;

  // Start drawing from the first point
  ctx.beginPath();
  ctx.moveTo(points[0].x, points[0].y);
  
  for (let i = 1; i < points.length; i++) {
    // Adjust line width based on pressure for a more natural look
    ctx.lineWidth = (points[i].pressure / 127) * 3 + 1;
    ctx.lineTo(points[i].x, points[i].y);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(points[i].x, points[i].y);
  }
}

Step 3: Convert Ionic Canvas Points Back to Topaz Format #

To send signatures from Ionic to the web, collect the points as the user draws (listen to touchstart, touchmove events on the Canvas), then package them into Topaz's binary format and convert to ASCII hex:

// Convert Ionic signature points to Topaz-style ASCII hex
function pointsToTopazHex(points: {x: number, y: number, pressure: number}[]) {
  const byteLength = 2 + (points.length * 5); // 2 bytes for point count, 5 bytes per point (2x X, 2x Y, 1x pressure)
  const data = new Uint8Array(byteLength);
  let offset = 0;

  // Write point count (16-bit)
  data[offset++] = points.length & 0xFF;
  data[offset++] = (points.length >> 8) & 0xFF;

  // Write each point
  points.forEach(point => {
    data[offset++] = point.x & 0xFF;
    data[offset++] = (point.x >> 8) & 0xFF;
    data[offset++] = point.y & 0xFF;
    data[offset++] = (point.y >> 8) & 0xFF;
    data[offset++] = point.pressure & 0xFF;
  });

  // Convert Uint8Array to ASCII hex
  return Array.from(data).map(byte => byte.toString(16).padStart(2, '0')).join('');
}

2. Convert to Base64 Image (Simpler, for Display-Only) #

If you don't need to edit the signature and just want to display it across platforms, you can convert the signature to a bitmap image:

Web to Ionic: #

On your web app, use Sigweb to render the signature to a Canvas, then export it as a Base64 string:

// After getting sigData from Topaz Sigweb
sigWeb.SigImage(document.getElementById('sig-canvas'), sigData, () => {
  const canvas = document.getElementById('sig-canvas');
  const base64 = canvas.toDataURL('image/png');
  // Send this base64 string to your backend or directly to the Ionic app
});

In Ionic, just bind the Base64 string to an <img> tag:

<img [src]="signatureBase64" alt="User Signature">

Ionic to Web: #

On your Ionic app, export the Canvas signature to Base64 and send it to the web app, where you can display it directly as an image.

Check for Encryption #

You mentioned wondering if the data is encrypted—Topaz Sigweb only encrypts sigData if you've explicitly set an EncryptionKey during initialization. If you have, you'll need to decrypt the hex data first using the same key before parsing it. Double-check your Sigweb setup code for any encryption-related config.

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