Как отправить изображение base64 через ajax

Я разрабатываю конструктор футболки. Когда я отправляю данные base64 ( canvas.toDataUrl() ) с помощью метода ajax POST на сервер, я получаю строку base64 с пробелами.

Для exmaple:

Послать:

 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)} 

белый интервал скриншот

Solutions Collecting From Web of "Как отправить изображение base64 через ajax"

используйте 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 */" /> 

а не просто просмотр строки.

Я понял свою проблему, мне нужно добавить encodeURIComponent() в base64. Спасибо Джонатан Кун за помощь!