data - javascript http post

Convierte dataUrl en blob y envía a través de ajax

Question

Estoy usando el plugin imgly image cropper, ligeramente modificado para mi aplicación. Actualmente convierte una imagen en una dataUrl y escupe la imagen como una imagen base64 que puedo guardar como un archivo JPEG. Estoy trabajando en la adaptación de la función dataURItoBlob que se encuentra aquí , en mi aplicación, para poder publicar la imagen en un punto final de la API. Tengo lo siguiente hasta ahora, pero no estoy seguro de cómo agregar la imagen final a xhr.open(''POST'', ''/'', true);

renderButton.click(function (event) {
var dataUrl = 

imgly.renderToDataURL("image/jpeg", { size: "1200" }, function (err, dataUrl) {

        //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();

    fd.append("myFile", blob);
    xhr.open(''POST'', ''/'', true);
    xhr.send(fd);



//Appends generated dataUrl to a div 
var image = $("<img><br>").attr({
        src: dataUrl
      });
//Remove button
      image.appendTo($(".result"))
      $button = $(''<button class="btn btn-default remove">'')
            .text(''Remove Image'')
            .on(''click'', function () {
                image.remove();
                $(this).remove();
                return false;
            });
        $button.appendTo($(".result"));
    });
  });
});

Answer 1

Actualizado

"Suponiendo que guardo la aplicación de la misma forma, estoy tratando de encontrar la manera de hacer que el URL de datos entre en la función de publicación".

Pruebe, en las líneas 15 - 103 en http://jsfiddle.net/mattography/Lgduvce1/6/

  var blob; // declare `blob`
  // As soon as the user selects a file...
  fileInput.addEventListener("change", function (event) {
    var file; // declare `file`    
    var fileToBlob = event.target.files[0];
          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 _data = dataUrl.split(/,/)[1];
    // var fd = new FormData(document.forms[0]);
    var xhr = new XMLHttpRequest();
        function success(response) {
            if (response.target.readyState === 4) {
                var data = JSON.parse(response.target.response);
                var image = "data:" + data.type + ";base64," + data.file;
                console.log(image); // `data URI` of resized image
            }
        }
        xhr.onload = success;
    // fd.append("myFile", blob);
    xhr.open("POST", "/echo/json/", true);
    xhr.send("json=" + encodeURIComponent(
                           JSON.stringify({"file": _data,"type":blob.type})
                       )
    );

Ver también Handling_the_upload_process_for_a_file