URL encoding "data:image/jpg; base64" image

Question

How can I encode the data:image/jpeg;base64 data url to be transmitted correctly through an AJAX POST. I have the following code xhr.open('POST', 'http://url-sent-to/image/' + saveImage + '&imageid=' + imageid.value, true); that is doing so now.

However, the URL http://url-sent-to/image/data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD…RRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFAH/2Q==&imageid=testimagedata does not look like it will be correct, especially since it has = in it.

    $(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 < 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 + '&imageid=' + imageid.value, true);
    xhr.send(fd);

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: http://jsfiddle.net/mattography/Lgduvce1/2/

1) You can always just pass the data as a POST variable. There's no need to encode the data in the URI for post requests. 2) If you choose to do it with the funky base64 URIs, you can use a web-safe encoder library like https://www.npmjs.com/package/urlsafe-base64 — lxe, Mar 23 '15 at 21:14
If you're using jQuery, why are you manually executing XHRs? You shouldn't be trying to send an entire image in a URL. It should go in the post body (variables). — JLRishe, Mar 23 '15 at 21:15
http://stackoverflow.com/questions/29151420/convert-dataurl-to-blob-and-submit-through-ajax/29154834#29154834 , http://jsfiddle.net/mattography/Lgduvce1/6/ — guest271314, Mar 23 '15 at 21:30

score 0 · Answer 1 · answered Mar 23 '15 at 21:14

0

You're looking for encodeURI(), which will do exactly what you're looking for.

Note that you're missing a ? to start your querystring.

Also note that making URLs that long is a bad idea; you should send a POST request instead.

answered Mar 23 '15 at 21:14

SLaks

868,454
176
1,908
1,964

I tried `encodeURIComponent()`, and it seems to be getting somewhere. The issue is that I still have a gigantic base64 URI, so I need to figure out how to shorten that to be inserted into a POST url. This is my updated version: http://jsfiddle.net/mattography/Lgduvce1/9/ Is there a way to use the `fileToBlob` functionality I have at line 20(though this is triggered only after the the image is loaded to the canvas, and not when the user renders the cropped image), in the POST URL? – Matt Mar 30 '15 at 16:34

URL encoding "data:image/jpg; base64" image

1 Answers1