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

Question

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

保存到配置文件功能

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;
  }
});

Node中的路由

const fs = require('fs');    

    // POST - ESignature Processing
  router.post('/eSig/save/', ensureAuthenticated, (req, res) => {
  const trimmedData = req.body.base64Data;
  console.log(`The trimmed data is: ${trimmedData}`);
  const buffer = Buffer.from(trimmedData);
  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');
  }
});

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');
  }
});