我每隔几秒从 Canvas 生成一个 Base64 字符串:
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);
}
});
}
如果我从 console.log(canvas.toDataURL()) 复制数据并将其粘贴到此处 http://codebeautify.org/base64-to-image-converter我得到了正确的图像。
我通过 ajax 将数据发送到我的 Controller 功能:
public function postAjax(Request $request)
{
$data = $request->all();
}
我的ajax中的成功方法调用$data,但是base64string是错误的,如果我将其粘贴到这里:http://codebeautify.org/base64-to-image-converter它什么也没显示。
工作的 base64 字符串:http://kopy.io/fjlzp 不起作用的 base64 字符串:http://kopy.io/w1F20
除此之外,我还得到了围绕不工作的 64 进制字符串生成的脚本:http://kopy.io/X7TtO
最佳答案
典型的 Base64 字符串可能如下所示:
TWFuIGlzIGRpc3Rpbmd1aXNoZWQsIG5vdCBvbmx5IGJ5IGhpcyByZWFzb24sIGJ1dCBieSB0aGlz IHNpbmd1bGFyIHBhc3Npb24gZnJvbSBvdGhlciBhbmltYWxzLCB3aGljaCBpcyBhIGx1c3Qgb2Yg dGhlIG1pbmQsIHRoYXQgYnkgYSBwZXJzZXZlcmFuY2Ugb2YgZGVsaWdodCBpbiB0aGUgY29udGlu dWVkIGFuZCBpbmRlZmF0aWdhYmxlIGdlbmVyYXRpb24gb2Yga25vd2xlZGdlLCBleGNlZWRzIHRo ZSBzaG9ydCB2ZWhlbWVuY2Ugb2YgYW55IGNhcm5hbCBwbGVhc3VyZS4=
请注意,由于末尾有 =
,服务器将获得带有数组键的查询字符串 TWFuIGlzIGRpc3Rpbmd1aXNoZWQsIG5vdCBvbmx5IGJ5IGhpcyByZWFzb24sIGJ1dCBieSB0aGlz
IHNpbmd1bGFyIHBhc3Npb24gZnJvbSBvdGhlciBhbmltYWxzLCB3aGljaCBpcyBhIGx1c3Qgb2Yg
dGhlIG1pbmQsIHRoYXQgYnkgYSBwZXJzZXZlcmFuY2Ugb2YgZGVsaWdodCBpbiB0aGUGY29udGlu
dWVkIGFuZCBpbmRlZmF0aWdhYmxlIGdlbmVyYXRpb24gb2Yga25vd2xlZGdlLCBleGNlZWRzIHRo
ZSBzaG9ydCB2ZWhlbWVuY2Ugb2YgYW55IGNhcm5hbCBwbGVhc3VyZS4
和一个空值,这会弄乱事情。
这样做:
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);
}
});
}
然后您可以通过以下方式获取此数据:
public function postAjax(Request $request) {
$data = $request->imgData;
}
关于javascript - Ajax base64 字符串无法成功工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43122093/