如何通过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)}

white spacing screenshot

来源

2017-06-16 Степан Куштуев

请求数据中是否显示空格？如果您在开发人员控制台 - >网络选项卡下查看请求，那么是否显示空格？如果是这样，那么这是与JavaScript添加它们，而不是PHP的问题。你也可以尝试在你的变量周围使用'encodeURIComponent（）'来确保url实体被正确地转换为它们的url转义值（即'％20'为空格）。如果你仍然看到空格，那么你需要提供更多的代码，因为这里显示的代码不会那样做。 –

'encodeURIComponent（）'不转换url转义值。但是，当我写服务器的txt文件front_base64我看到空间 –

使用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 */" />

而不只是查看字符串。

来源

2017-06-17 10:29:25

这段代码没有解决问题 –

我已经理解了我的问题，我需要在base64周围添加encodeURIComponent()。感谢Jonathan Kuhn寻求帮助！

来源

2017-06-17 21:08:51

如何通过ajax发送base64图像

回答

相关问题