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
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;
}