title: Text -> PNG -> ReadStream, all done on the front-end?
body: <p>I'm not sure if this is even possible, but here's what I'm trying to do:</p>
  <ol>
  <li>Let the user enter some text</li>
  <li>Generate a PNG from that text</li>
  <li>Upload it to Pinata, which requires it to be in <code>ReadStream</code> format</li>
  <li>Do all of this on the front-end</li>
  </ol>
  <p>I've managed to accomplish (1) and (2) using <a href="https://html2canvas.hertzen.com/getting-started" rel="nofollow noreferrer">html2canvas</a>.</p>
  <p>The tricky part is (3). The reason it has to be in <code>ReadStream</code> format is because that's the format <a href="https://www.npmjs.com/package/@pinata/sdk#pinFileToIPFS-anchor" rel="nofollow noreferrer">Pinata's SDK</a> wants:</p>
  <pre class="lang-js prettyprint-override"><code>const fs = require('fs');
  const readableStreamForFile = fs.createReadStream('./yourfile.png');
  const options = {
      pinataMetadata: {
          name: MyCustomName,
          keyvalues: {
              customKey: 'customValue',
              customKey2: 'customValue2'
          }
      },
      pinataOptions: {
          cidVersion: 0
      }
  };
  pinata.pinFileToIPFS(readableStreamForFile, options).then((result) =&gt; {
      //handle results here
      console.log(result);
  }).catch((err) =&gt; {
      //handle error here
      console.log(err);
  });
  </code></pre>
  <p>I realize that this would be no problem to do on the backend with node, but I'd like to do it on the front-end. Is that at all possible? Or am I crazy?</p>
  <p>I'm specifically using Vue if that matters.</p>