Jump to content

jQuery Ajax base64 image to PHP server


OAFC_Rob

Recommended Posts

I'm trying take an image from a handheld APP i'm developing and send it via a jQuery AJAX call to my PHP server. 

 

I know that I need to save the image as base64 for file transfer and then get my server-side code to decode the stream and save to disk. I have been following method one from this site http://mitgux.com/send-canvas-to-server-as-file-using-ajax

 

However, it still isn't working when my PHP code save the image it is not viewable and I believe it's because the data isn't being sent in the stream correctly, can anyone help me!!

var dataURL = './common_assets/images/other/upload.png';
params = {image: 'image/png; base64,'+dataURL};

ServiceCall('http://alpha.tfcloud.local/tfbeacon/test.php', 
                '', 
                params, 
                onResult, 
                'Submitting data', null);

function ServiceCall(url, method, params, onSuccess, loadingMsg, contentType) {
    
    url = $.trim(url);
    
    url = url + method;
    
    if(!url.endsWith('/')) {
        
        url += '/';
        
    }

    var request = $.ajax({
        url         : url,
        type        : 'POST',
        data        : params,
        contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
        //dataType    : 'JSON', 
        crossDomain : true,
        cache       : false,
        success     : onSuccess,
        error       : function(jqXHR, textStatus, error) {
            
            if(jqXHR != undefined) {
                
                if(jqXHR.responseText != undefined) {
                    
                    var errorObject = $.parseJSON(jqXHR.responseText);

                    if (errorObject.error != undefined) {

                        msg = errorObject.error;

                    } else {

                        msg  = jqXHR.responseText;

                    }
                }
            }

        }
    });
}
Link to comment
Share on other sites

Resolved in a way, as I now have an image that is outputting from my server side code. 

 

JS Below

var test = document.getElementById('test');
    var canvas = document.getElementById('canvas2');
    var context = canvas.getContext('2d');
    context.drawImage(test, 69, 50);


    var dataURL = canvas.toDataURL();
    
    params = {image: dataURL};
    
    console.log("DATA TO BE SENT AS POST");
    console.log(params);
    
    ServiceCall('http://alpha.tfcloud.local/tfbeacon/test.php', 
                '', 
                params, 
                onResult, 
                'Submitting data', null);

//ServiceCall is the same as the previous post
<img id="test" src="./common_assets/images/other/upload.png" />
<canvas id="canvas2" width="578" height="200"></canvas>

HTML Above

$img = $_POST['image'];

$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = 'C:/' . uniqid() . '.png';
$success = file_put_contents($file, $data);

echo $success ? $file.' SUCCESS!!' : 'Unable to save the file.';

PHP Above

 

The only issue now is the logic and rendering of the images to to populate the canvas. As I originally wanted to pull all the data from the APP database build up my JSON data and AJAX it all to the server. However, I think i'm going to tackle this after some lunch 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.