jQuery Ajax base64 image to PHP server

[OAFC_Rob]

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;

                    }
                }
            }

        }
    });
}

[OAFC_Rob]

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