Submitting canvas.toDataURL () as FormData

Question

I am trying to use html2canvas to render a DOM element as a .png image, which I then want to upload to the server. Here is my code:

import React, { Component, PropTypes } from 'react';
import html2canvas from 'html2canvas';
import axios from 'axios';


const sendScreenshot = (img) => {
  const config = {
      headers: {
          'content-type': 'multipart/form-data'
      }
  }
  let data = new FormData();
  data.append('screenshot', img);      
  return axios.post('/api/upload', data)
}

export default class Export extends Component {

  printDocument() {
    const input = document.getElementById('divToPrint');
    html2canvas(input).then(canvas => {
      document.body.appendChild(canvas);
      const imgData = canvas.toDataURL('image/png');
      sendScreenshot(imgData)
    });
  }

  ...

I see that the DOM element is being converted to the image correctly, because I can see it attached to the page.

On the node.js server, I see that the form passes, but the “screenshot” is accepted as a text field, and not as a file. I am using multer and I have confirmed that I can correctly receive and save file downloads, at least when I use Postman.

, , , , FormData, , . , . append , imgData blob :

const blob = new Blob([img], {type: 'image/png'});

, .

Answer 1

POST, Blob. Blob . Blob Canvas, toBlob.

Blob, Blob FormData, append. append Blob . Blob .

.