4

I need to send image data (data:image/png;base64) from the clientside using AJAX to my PHP server. My AJAX call looks like this:(form_data contains the image)

$.ajax({
    url: global_siteurl+'/save_image',
    data: form_data,
    dataType: 'json',
    type: 'post',
    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
    success: function (retval) {   
        process_save_image(retval);
    }
});

Then I store the encoded image data as a blob in the database (yes - long story behind that!). When I retrieve the image data it seems to be corrupted and does not display correctly. Almost as if there are line breaks and spaces introduced into the image data. Am I missing any parameters in my ajax call? Any ideas as to what may be going wrong? Is there a size limit for the image data I can send across?

It's been a long 4 days of chasing this one.

Mmiz

user1072910
  • 263
  • 1
  • 5
  • 17
  • [There is a size limit, yes, but it's browser-dependent](http://stackoverflow.com/questions/695151/data-protocol-url-size-limitations). – Blazemonger Oct 01 '13 at 19:23

2 Answers2

1

The problem turned out to be the same described (and solved) in this posting:

Blob data replace '+' with space

Turns out I needed to make the blob data safe for URLs when I GET/POST it. On the PHP server side I used the function described in the above posting. On the Javascript side, I used the functions from:

http://notepad2.blogspot.com/2012/08/javascript-make-base64-encoded-string.html

Took a lot of staring at the encoded image data to notice that the +/= were replaced.

Community
  • 1
  • 1
user1072910
  • 263
  • 1
  • 5
  • 17
0

Try this when showing image.

echo '<img src="data:image/png;base64,' . base64_encode($blob_data) . '"/>
Iqbal Malik
  • 602
  • 5
  • 13