javascript image upload via datauri and php base64 decode

Question

I am trying to make an image upload where the JavaScript posts DataURI of an image via AJAX and the PHP receives it to decode it into an image.

The problem is, everything is working fine except that the end product is not an image file.

Please have a look at the following example code.

JavaScript:

dataString='encodedimg='+e.target.result.match(/,(.*)$/)[1]+'&type='+type;
$.ajax({
  url: 'uploadhandler_ajax.php',
  type: 'POST',
  data: dataString,
  success: function(data){
    //print success message
  });

PHP:

$encodedimg = $_POST['encodedimg'];
file_put_contents('asdf.png', base64_decode($encodedimg));

There is no problem with $_POST['encodedimg'] as it produces the right image using online base64 converter. So I am assuming that there is a misuse with file_put_contents() or base64_decode() .

Appreciate the help!

Answer 1

To read image on PHP i used a function like this

function rcd($data) {
    $p = strpos($data, ',');
    $d = base64_decode(substr($data, $p+1));
    $rfn = md5(mt_rand(1,123123123));
    file_put_contents($rfn, $d, LOCK_EX);
    return $rfn;
}

Usage example: $img_file_name = rcd($_POST['image_data']);

On JS part it is tricky (different browsers, etc). First of all You need to have the image data. Now You do not precise how this is sourced and the code example does not give a hint. We can assume some options

Simple You get dataString properly populated by whatever means neccesary, then Your example should basically work

imgdata = .... // any means of getting the data

$.ajax({
  url: 'uploadhandler_ajax.php',
  type: 'POST',
  image_data: imgdata,
  success: function(data){
    //print success message
});

Not so simple You have a Canvas object on the screen which was populated by any means and You want to send that data. Whatever above is true, however the way to get image data would be

var canv = document.getElementById('id_of_canvas');
imgdata = canv. toDataURL('image/jpeg', 0.88); // last arg is quality

However, as some browsers (mobiles) might not be so lucky to support this, you might want to find JPEGEncoder for JS and add it, along with the code below, to Your project.

var tdu = HTMLCanvasElement.prototype.toDataURL;
HTMLCanvasElement.prototype.toDataURL = function(type,param1)
{
 var res = tdu.apply(this,arguments);
 if(res.substr(0,11) != "data:image/")
 {
  var encoder = new JPEGEncoder();
  return encoder.encode(this.getContext("2d").getImageData(0,0,this.width,this.height), (param1 ? param1*100 : 88));
 }
 else return res;
}

Hope this helps!

Answer 2

FOr @Marcin Gałczyński:

$.ajax({
  url: 'uploadhandler_ajax.php',
  type: 'POST',
  image_data: imgdata,
  success: function(data){
    //print success message
  }
})

I think jQuery.ajax didnt have image_data jQuery.ajax