Написание png, сгенерированного из canvas с использованием toDataURL, затем отправленного через XMLHttpRequest в NodeJS / Express

Question

Пробовал различные методы, которые я нашел через Google, но, похоже, ни один из них не работает. Я работаю с signature-pad, javascript / html5 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;
  }
});

И маршрут в Узле

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