CODEWITHSUNDEEP
javascriptphpajaxcanvasbase64
utdev
utdev

Reputation: 4102

Ajax base64 String does not work in success

I generate every few second a base64 string from a canvas:

function generateImg(start) {

    startInterval = setInterval(function() {
       saveBase64StringAjax(canvas.toDataURL());
    }, 1000);

}


function saveBase64StringAjax(imgData) {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        url: 'postStream',
        type: 'post',
        data: imgData,
        success:function(data) {
            console.log(data);
        }
    });
}

If I copy the data from console.log(canvas.toDataURL()) and paste it into here http://codebeautify.org/base64-to-image-converter I get the correct image.

I am sending the data via ajax to my controller function:

public function postAjax(Request $request)
{
    $data = $request->all();
}

The success method in my ajax calls that $data but that base64string is wrong, if I paste that here: http://codebeautify.org/base64-to-image-converter it shows nothing.

The working base64 String : http://kopy.io/fjlzp The base64 String which does not work: http://kopy.io/w1F20

In addition to that I get this script generated around the not working base 64 string: http://kopy.io/X7TtO

Upvotes: 1

Views: 674

Answers (1)

apokryfos
apokryfos

Reputation: 40653

A typical Base64 string may look like :

TWFuIGlzIGRpc3Rpbmd1aXNoZWQsIG5vdCBvbmx5IGJ5IGhpcyByZWFzb24sIGJ1dCBieSB0aGlz IHNpbmd1bGFyIHBhc3Npb24gZnJvbSBvdGhlciBhbmltYWxzLCB3aGljaCBpcyBhIGx1c3Qgb2Yg dGhlIG1pbmQsIHRoYXQgYnkgYSBwZXJzZXZlcmFuY2Ugb2YgZGVsaWdodCBpbiB0aGUgY29udGlu dWVkIGFuZCBpbmRlZmF0aWdhYmxlIGdlbmVyYXRpb24gb2Yga25vd2xlZGdlLCBleGNlZWRzIHRo ZSBzaG9ydCB2ZWhlbWVuY2Ugb2YgYW55IGNhcm5hbCBwbGVhc3VyZS4=

Note that because of the = at the end the server will get a query string with an array key TWFuIGlzIGRpc3Rpbmd1aXNoZWQsIG5vdCBvbmx5IGJ5IGhpcyByZWFzb24sIGJ1dCBieSB0aGlz IHNpbmd1bGFyIHBhc3Npb24gZnJvbSBvdGhlciBhbmltYWxzLCB3aGljaCBpcyBhIGx1c3Qgb2Yg dGhlIG1pbmQsIHRoYXQgYnkgYSBwZXJzZXZlcmFuY2Ugb2YgZGVsaWdodCBpbiB0aGUgY29udGlu dWVkIGFuZCBpbmRlZmF0aWdhYmxlIGdlbmVyYXRpb24gb2Yga25vd2xlZGdlLCBleGNlZWRzIHRo ZSBzaG9ydCB2ZWhlbWVuY2Ugb2YgYW55IGNhcm5hbCBwbGVhc3VyZS4 and an empty value which will mess things up.

Do this:

function saveBase64StringAjax(imgData) {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        url: 'postStream',
        type: 'post',
        data: { imgData: imgData },
        success:function(data) {
            console.log(data);
        }
    });
}

Then you can get this data via:

public function postAjax(Request $request) {
    $data = $request->imgData;
}

Upvotes: 1

Related Questions