title: Convert Data URI to File
body: <p>I want to convert a <code>data:image</code> encoded with base64 to a normal image file. So far my code looks like this:</p>
  
  <pre><code>this.toDataURL = function() {
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      canvas.width = innerWidth;
      canvas.height = innerHeight;
      ctx.drawImage(layer0, 0, 0);
      ctx.drawImage(layer1, 0, 0);
      ctx.drawImage(layer2, 0, 0);
      var url = canvas.toDataURL('image/png');
      document.getElementById('canvascontent').value = url;
  };
  </code></pre>
  
  <p>As you can see it creates an DataUrl that is afterwards displayed in an output(#cancascontent). The final output looks something like this:</p>
  
  <pre class="lang-none prettyprint-override"><code>data:image/png;base64,iVBORw0KGgo.................
  </code></pre>
  
  <p>My problem is that I need it necessarily decoded so that I can upload the images. My aim is that my javascript code displays the image in a new window like a "normal" image file. For example. like this:</p>
  
  <pre class="lang-none prettyprint-override"><code>http://example.com/images/pro_js_3e.png
  </code></pre>
  
  <p>How can I decode the base64 image?</p>