如何通过ajax发送base64图像
问题描述:
我开发了t恤构造函数。当我通过ajax POST方法向服务器发送base64数据(canvas.toDataUrl()
)时,我得到了带空格的base64字符串。如何通过ajax发送base64图像
对于〔实施例:
发送:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhsAAAIbCAYAAABCJ1y9AAAgAElEQVR4Xuy9CbCmVXkuur7pn/bcczd00w2INAhBmdQ4EDNpHEi8gVMQcyKpc3NOck3lOKRyokmFUzmHSupgLG9MTFKpeK
得到:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhsAA
AIbCAYAAABCJ1y9AAAgAElEQVR4Xuy9CbCmVXkuur7pn/b
cczd00w2INAhBmdQ4EDNpHEi8gVMQcyKpc3 NOck3lOKRyokmFUzmH SupgLG9MT FKpeK
JS代码:
var data = csrfParam + '=' + csrfToken + '&front_base64=' + frontImage
+ '&back_base64=' + backImage + '&product_id=' + currentProduct['id']
+ '&color_id=' + currentProductColorId + '&size_id=' +
currentProductSize;
var xhr = new XMLHttpRequest();
xhr.open('POST', '/constructor/add-to-cart/', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(data);
xhr.onload = function() {console.log(xhr.responseText)}
答
使用jQuery AJAX它会让你的生活变得更加简单,问题会得到解决,以及:
$.post('/constructor/add-to-cart/',{
csrfParam : csrfToken,
front_base64: frontImage,
back_base64 : backImage,
product_id : currentProduct['id'],
color_id : currentProductColorId,
size_id : currentProductSize
},function(response){
console.log(response)
});
,如果你想查看后台以base64图像,检查其确定
<img src="/* base 64 string here */" />
而不只是查看字符串。
+0
这段代码没有解决问题 –
答
我已经理解了我的问题,我需要在base64周围添加encodeURIComponent()
。感谢Jonathan Kuhn寻求帮助!
请求数据中是否显示空格?如果您在开发人员控制台 - >网络选项卡下查看请求,那么是否显示空格?如果是这样,那么这是与JavaScript添加它们,而不是PHP的问题。你也可以尝试在你的变量周围使用'encodeURIComponent()'来确保url实体被正确地转换为它们的url转义值(即'%20'为空格)。如果你仍然看到空格,那么你需要提供更多的代码,因为这里显示的代码不会那样做。 –
'encodeURIComponent()'不转换url转义值。但是,当我写服务器的txt文件front_base64我看到空间 –