如何通過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圖像

回答

相關問題