如何通过ajax发送base64图像

Question

我正在开发T恤构造。 当我通过ajax POST方法将base64数据（ canvas.toDataUrl() ）发送到服务器时，我得到带有空格的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)}

白色间距截图

Answer 1

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

而不只是查看字符串。

Answer 2

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