如何用JavaScript Fetch在HTML表单/Canvas显示Verifone签名板签名？

步骤1：准备HTML结构 #

在你的表单中添加用于显示签名的元素，推荐用<img>（更简单）或<canvas>，两种方案示例如下：

<form id="signatureForm">
  <!-- Img标签显示签名 -->
  <div>
    <h3>签名预览</h3>
    <img id="signatureImg" alt="用户签名" style="border:1px solid #ccc; padding:10px; max-width:300px;">
  </div>

  <!-- Canvas标签显示签名（可选，适合需要编辑的场景） -->
  <div>
    <h3>Canvas签名预览</h3>
    <canvas id="signatureCanvas" style="border:1px solid #ccc; padding:10px;"></canvas>
  </div>
</form>

步骤2：修改Fetch代码处理签名显示 #

调整现有Fetch的成功回调，将返回的Base64格式PNG转换为浏览器可识别的图片格式，完整代码如下：

var docDescription = 'Please sign wire transfer request';
var reqUrl = 'http://localhost:12001/SigCaptureWait?ResponseType=API&UseReceiptDataList=1&ReturnSigType=PNG&CreateFile=false&TopazType=1';
docDescription = docDescription.replaceAll(' ', '%20');
reqUrl += '&ReceiptData=' + docDescription;

fetch(reqUrl)
  .then(data => data.json())
  .then(data => {
    console.log('data', data);
    // 校验请求是否成功且包含有效签名数据
    if (data.successful && data.response?.PNG) {
      const base64Png = data.response.PNG;
      // 构造完整的图片Data URL（必须添加前缀才能被识别）
      const imgSrc = `data:image/png;base64,${base64Png}`;

      // 方案1：用Img标签快速显示
      const signatureImg = document.getElementById('signatureImg');
      signatureImg.src = imgSrc;

      // 方案2：用Canvas显示（若需后续编辑签名则用这个）
      const canvas = document.getElementById('signatureCanvas');
      const ctx = canvas.getContext('2d');
      const img = new Image();
      img.onload = function() {
        // 同步Canvas尺寸与图片尺寸
        canvas.width = img.width;
        canvas.height = img.height;
        // 将签名图片绘制到Canvas
        ctx.drawImage(img, 0, 0);
      };
      img.src = imgSrc;
    } else {
      console.log('未获取到有效签名数据');
    }
  })
  .catch(e => {
    console.log('Error fetching image', e)
  });

核心说明 #

• 返回的Base64字符串缺少浏览器识别前缀，必须拼接data:image/png;base64,才能被解析为图片
• <img>标签是最简便的显示方案，适合仅展示的场景
• 若需要对签名进行缩放、添加水印等二次编辑操作，再选择Canvas方案

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