CODEWITHSUNDEEP
javascriptphpjqueryajaximage
user1072910
user1072910

Reputation: 261

Sending image data over AJAX from jquery

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

Upvotes: 4

Views: 8963

Answers (2)

user1072910
user1072910

Reputation: 261

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.

Upvotes: 1

Iqbal Malik
Iqbal Malik

Reputation: 602

Try this when showing image.

echo '<img src="data:image/png;base64,' . base64_encode($blob_data) . '"/>

Upvotes: 0

Related Questions