CODEWITHSUNDEEP
javascriptnode.jscanvasxmlhttprequest
Antonio B
Antonio B

Reputation: 45

Writing a png that's generated from canvas using toDataURL then sent via XMLHttpRequest in NodeJS/Express

Been trying various methods I've found via google but none seem to work. I'm working with signature-pad, the javascript/html5 canvas solution for eSignatures. I'm trying to save the canvas data as a png to a temporary folder (TempFolder/username/signature.png). To post the the results of toDataURL I'm using XMLHttpRequest. Everything else is Node.js / Express. I left the download in to make sure the dataURL is not corrupted. Since I wasn't able to use body-parser to grab the data from passing it through XMLHttp I instead populate a hidden field with the data then submit it.

Save to Profile Function 

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

And the route in 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');
  }
});

Upvotes: 1

Views: 828

Answers (1)

Antonio B
Antonio B

Reputation: 45

Figured it out. Here is the working code (buffer's need to know it's 'base64')

Save to Profile Function

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

Route on Node.js to save

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

Upvotes: 1

Related Questions