Genero cada pocos segundos una cadena base64 desde un lienzo:
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); } }); }Si copio los datos de console.log(canvas.toDataURL()) y los pego aquí http://codebeautify.org/base64-to-image-converter obtengo la imagen correcta.
Estoy enviando los datos a través de ajax a mi función de controlador:
public function postAjax(Request $request) { $data = $request->all(); }El método de éxito en mi ajax llama a ese $data pero esa base64string está mal, si la pego aquí: http://codebeautify.org/base64-to-image-converter no muestra nada.
La cadena base64 que funciona: http://kopy.io/fjlzp La cadena base64 que no funciona: http://kopy.io/w1F20
Además de eso, obtengo este script generado alrededor de la cadena base 64 que no funciona: http://kopy.io/X7TtO
Una cadena típica de Base64 puede verse así:
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.
Hacer esto:
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); } }); }Entonces puede obtener estos datos a través de:
public function postAjax(Request $request) { $data = $request->imgData; }