How To Send Base64 Image Via Ajax

I am develop t-shirt constructor. When I send base64 data (canvas.toDataUrl()) via ajax POST method to server, I get base64 string with spaces. For exmaple: Send: data:image/png;b

Solution 1:

use jquery ajax it will make your life a lot easier and the problem will be solved as well :

$.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)
    });

and if you want view the base64 image in backend to check if its ok

<imgsrc="/* base 64 string here */" />

rather then just viewing the string.

Solution 2:

I have understood my problem, I need to add encodeURIComponent() around base64. Thanks Jonathan Kuhn for help!