Question

曾经尝试通过Google找到各种方法，但是似乎都没有用。我正在使用签名板，这是eSignature的javascript / html5画布解决方案。我正在尝试将画布数据作为png保存到一个临时文件夹（TempFolder / username / signature.png）。要发布toDataURL的结果，我正在使用XMLHttpRequest。其他一切都是Node.js / Express。我保留下载内容以确保dataURL没有损坏。由于我无法使用body-parser来获取通过XMLHttp传递的数据，因此我用数据填充了一个隐藏字段，然后提交了它。

保存到配置文件功能

state

以及节点中的路由

saveToServerButton.addEventListener('click', event => {
  if (signaturePad.isEmpty()) {
    const warning = document.getElementById('message');
    warning.value = 'Please provide a signature first.';
  } else {
    const image = signaturePad.toDataURL().replace(/^data:image\/png;base64,/, '');
    const httpRequest = new XMLHttpRequest();
    const hiddenInput = document.getElementById('base64Data');
    hiddenInput.value = image;
  }
});

Answer 1

弄清楚了。这是工作代码（缓冲区需要知道它是“ base64”）

保存到配置文件功能

saveToServerButton.addEventListener('click', event => {
  if (signaturePad.isEmpty()) {
    const warning = document.getElementById('message');
    warning.value = 'Please provide a signature first.';
  } else {
    const image = signaturePad.toDataURL().replace(/\s/g, '+').replace(/^data:image\/png;base64,/, '');
    const httpRequest = new XMLHttpRequest();
    const hiddenInput = document.getElementById('base64Data');
    hiddenInput.value = image;
  }
});

在Node.js上路由以保存

// POST - ESignature Processing
router.post('/eSig/save/', ensureAuthenticated, (req, res) => {
  const trimmedData = req.body.base64Data;
  const buffer = Buffer.from(trimmedData, 'base64');
  const usernameForFolder = req.user.username;
  const userFolder = `${dir}/${usernameForFolder}`;
  if (!fs.existsSync(userFolder)){
    fs.mkdirSync(userFolder);
    fs.writeFile(`${userFolder}/signature.png`, buffer, 'base64', err => {
      if (err) throw err;
      console.log('saved');
    });
    res.redirect('../../profile');
  } else {
    fs.writeFile(`${userFolder}/signature.png`, buffer, 'base64', err => {
      if (err) throw err;
      console.log('saved');
    });
    res.redirect('../../profile');
  }
});

编写使用toDataURL从画布生成的png，然后通过NodeJS / Express中的XMLHttpRequest发送

1 个答案: