title: Decoding and saving an image using canvas.toDataURL()
body: <p>I'm working on a project which involves a user dragging and dropping boxes onto a div to create a layout. Once the user is done, there's a button to press which takes the div and creates a canvas element from it using html2canvas, then it opens up in a new window as an image. This is fine, but I need it to save somewhere so it can be attached to an email and sent. So far, all I have is the base64 encoded string which I cannot really do anything with.</p>
  
  <p>On the js side, I have:</p>
  
  <pre><code>html2canvas($('#canvas')).then(function(canvas) {
      $('canvas').addClass('canvas-layout');
      var src = canvas.toDataURL();
      var output=src.replace(/^data:image\/(png|jpg);base64,/, "");
      $.post( 'result.php', { data: output })
          .done( function(response) {
              console.log(response);
          }
      );
      return false;
  });
  </code></pre>
  
  <p>where #canvas is the ID of the div. In the result.php file, I have:</p>
  
  <pre><code>$decodedData = base64_decode($_POST['data']);
  
  $img = $decodedData;
  
  $image = fopen($img, 'r');
  file_put_contents("images/layout.png", $image);
  fclose($image);
  </code></pre>
  
  <p>But I get a warning saying that I'm passing a string to fopen() - though this solution was given in another stackoverflow post and people seemed to get this working. Originally, the js just opened the image in a new window like so:</p>
  
  <pre><code>window.open(src,'Image','width=1440,height=650,resizable=1');
  </code></pre>
  
  <p>But the URL in the browser window is the base64 encoded string which I can't do anything with.</p>
  
  <p>Is there a way of doing what I want to achieve?</p>
  
  <p>Thanks</p>