title: URL encoding "data:image/jpg; base64" image
body: <p>How can I encode the <code>data:image/jpeg;base64</code> data url to be transmitted correctly through an AJAX POST. I have the following code <code>xhr.open('POST', 'http://url-sent-to/image/' + saveImage + '&amp;imageid=' + imageid.value, true);</code> that is doing so now. </p>
  
  <p>However, the URL <code>http://url-sent-to/image/data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD…RRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFAH/2Q==&amp;imageid=testimagedata</code> does not look like it will be correct, especially since it has <code>=</code> in it.</p>
  
  <pre><code>    $(function () {
    var fileInput = document.getElementById("file")
      , renderButton = $("#renderButton")
      , imgly = new ImglyKit({
          container: "#container",
          ratio: 1 / 1
        });
  
    // As soon as the user selects a file...
    fileInput.addEventListener("change", function (event) {
      var file;
  
      var fileToBlob = event.target.files[0];
            var blob = new Blob([fileToBlob], {"type":fileToBlob.type});
            // do stuff with blob
            console.log(blob);
      // Find the selected file
      if(event.target.files) {
        file = event.target.files[0];
      } else {
        file = event.target.value;
      }
  
      // Use FileReader to turn the selected
      // file into a data url. ImglyKit needs
      // a data url or an image
      var reader = new FileReader();
      reader.onload = (function(file) {
        return function (e) {
          data = e.target.result;
  
          // Run ImglyKit with the selected file
          try {
            imgly.run(data);
          } catch (e) {
            if(e.name == "NoSupportError") {
              alert("Your browser does not support canvas.");
            } else if(e.name == "InvalidError") {
              alert("The given file is not an image");
            }
          }
        };
      })(file);
      reader.readAsDataURL(file);
    });
  
    // As soon as the user clicks the render button...
    // Listen for "Render final image" click
    renderButton.click(function (event) {
      var dataUrl;
  
  
      imgly.renderToDataURL("image/jpeg", { size: "1200" }, function (err, dataUrl) {
        // `dataUrl` now contains a resized rendered image with
        // a width of 300 pixels while keeping the ratio
  
         //Convert DataURL to Blob to send over Ajax
          function dataURItoBlob(dataUrl) {
          // convert base64 to raw binary data held in a string
          // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
          var byteString = atob(dataUrl.split(',')[1]);
  
          // separate out the mime component
          var mimeString = dataUrl.split(',')[0].split(':')[1].split(';')[0];
  
          // write the bytes of the string to an ArrayBuffer
          var ab = new ArrayBuffer(byteString.length);
          var ia = new Uint8Array(ab);
          for (var i = 0; i &lt; byteString.length; i++) {
              ia[i] = byteString.charCodeAt(i);
          }
          // write the ArrayBuffer to a blob, and you're done
          //var bb = new BlobBuilder();
          //bb.append(ab);
          //return bb.getBlob(mimeString);
      }
  
  
      var blob = dataURItoBlob(dataUrl);
      var fd = new FormData(document.forms[0]);
      var xhr = new XMLHttpRequest();
  
      var saveImage = dataUrl;
      //console.log(saveImage);
  
  
      fd.append("myFile", blob);
      xhr.open('POST', 'http://url-sent-to/image/' + saveImage + '&amp;imageid=' + imageid.value, true);
      xhr.send(fd);
  </code></pre>
  
  <p>I have a fiddle setup for an example of what I'm doing. Essentially, the user will select an image, enter a description, and hit render. When you check the Javascript console, you'll see a Blob is created, and the POST message at the bottom: <a href="http://jsfiddle.net/mattography/Lgduvce1/2/" rel="nofollow">http://jsfiddle.net/mattography/Lgduvce1/2/</a></p>