How to save onpaste image with a src of “data:image/png;base64,…” using php

May 09, 2017, at 11:17 AM

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.

I inspect element of the src of the pasted image and it was very long, like this "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARIAAAC4CAYAAAAvx2MfAAAgAElEQVR4Ae2dCXwW1dX..." its longer than this but for sample purposes. How should I save the image using this image address? Please help.

Here is the HTML:

<div class="col-lg-6">
   <div class="form-group col-lg-12">
      <input class="form-control" id="pasteArea" placeholder="Paste image here..."></input>
      <img name="map-sketch" id="pastedImage" width="100%" height="100%" src='images/sample.png'></img>
<div class="col-lg-1">
    <button type="button" class="btn btn-primary" onclick="save()">Save</button>
<div class="col-lg-2" id="saving-info"></div>

The src of the image above is a hard coded url.

Here is the javascript onpaste that I'm using:

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 < 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(; // data url!
         document.getElementById("pastedImage").src =;

And here is the AJAX code:

function save(){
   var params = 'kind=land';
   var image = document.getElementById("pastedImage").getAttribute("src");
   params += '&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 && xmlhttp.status == 200) {
            document.getElementById("saving-info").innerHTML = xmlhttp.responseText;
        }else { // waiting for result 
            document.getElementById('saving-info').innerHTML = '<img src="../images/ajax_loader.gif">';
    }"POST", "../functions/save-faas.php", true);

And here is the PHP code for saving the image:

   $url = $image;
   $img = '../images/1.png';

The code here is working with hard coded URL but not for pasted image.

What should I do? Thanks.

Answer 1

how about using onchange on this pasteArea id?

//do something
Rent Charter Buses Company
Not entering if condition in Php mySQL [on hold]

Not entering if condition in Php mySQL [on hold]

I can't figure out why my if statement isn't running after I submit the form

Date is returning a wrong value [duplicate]

Date is returning a wrong value [duplicate]

This question already has an answer here:

Using Chart.js on Laravel 5.3

Using Chart.js on Laravel 5.3

I'm going to use chart using chartjs on my laravel project