title: How to save onpaste image with a src of "data:image/png;base64,..." using php
body: <p>I'm trying to save the pasted image into a folder and the relevant details to the database, but my current code is not saving the pasted image, I try to put a hard coded url on the src attribute and it was working.</p>
  
  <p>I inspect element of the src of the pasted image and it was very long, like this <em>"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARIAAAC4CAYAAAAvx2MfAAAgAElEQVR4Ae2dCXwW1dX..."</em> its longer than this but for sample purposes. How should I save the image using this image address? Please help.</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div class="col-lg-6"&gt;
     &lt;div class="form-group col-lg-12"&gt;
        &lt;input class="form-control" id="pasteArea" placeholder="Paste image here..."&gt;&lt;/input&gt;
        &lt;img name="map-sketch" id="pastedImage" width="100%" height="100%" src='images/sample.png'&gt;&lt;/img&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="col-lg-1"&gt;
      &lt;button type="button" class="btn btn-primary" onclick="save()"&gt;Save&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="col-lg-2" id="saving-info"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The src of the image above is a hard coded url.</p>
  
  <p>Here is the javascript onpaste that I'm using:</p>
  
  <pre><code>document.getElementById('pasteArea').onpaste = function (event) {
     var items = (event.clipboardData  || event.originalEvent.clipboardData).items;
     console.log(JSON.stringify(items)); // will give you the mime types
  
     var blob = null;
     for (var i = 0; i &lt; items.length; i++) {
        if (items[i].type.indexOf("image") === 0) {
           blob = items[i].getAsFile();
        }
     }
  
     if (blob !== null) {
        var reader = new FileReader();
        reader.onload = function(event) {
           console.log(event.target.result); // data url!
           document.getElementById("pastedImage").src = event.target.result;
        };
        reader.readAsDataURL(blob);
     } 
  }
  </code></pre>
  
  <p>And here is the AJAX code:</p>
  
  <pre><code>function save(){
     var params = 'kind=land';
     var image = document.getElementById("pastedImage").getAttribute("src");
     params += '&amp;image='+image;
     if (window.XMLHttpRequest) {
          // code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp = new XMLHttpRequest();
      } else { // code for IE6, IE5
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  
      }
      xmlhttp.onreadystatechange = function () {
          if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200) {
              document.getElementById("saving-info").innerHTML = xmlhttp.responseText;
          }else { // waiting for result 
              document.getElementById('saving-info').innerHTML = '&lt;img src="../images/ajax_loader.gif"&gt;';
          }
      }
      xmlhttp.open("POST", "../functions/save-faas.php", true);
      xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
      xmlhttp.send(params);
  }
  </code></pre>
  
  <p>And here is the PHP code for saving the image:</p>
  
  <pre><code>&lt;?php
     $url = $image;
     $img = '../images/1.png';
     file_put_contents($img,file_get_contents($url));
  ?&gt;
  </code></pre>
  
  <p>The code here is working with hard coded URL but not for pasted image.</p>
  
  <p>What should I do? Thanks.</p>