将base64数据:url转换为图像blob

Question

我有一个图像裁剪器，它可以接收图像，并立即将其转换为blob

Blob {type: "image/jpeg", size: 40092, slice: function}size: 40092type: 
"image/jpeg"__proto__: Blob

在加载到画布之前。裁剪后，图像以base64输出。我需要能够将base64图像转换回blob或图像，这样我就可以通过AJAX将图像POST到API端点。我有以下内容可以完成所有这些，但我不知道如何将渲染的图像转换回POST的blob。用于POST的当前URL在控制台中使用encodeURIComponent(dataUrl):点击render后如下所示

http://url.com/rest/v1/utils/guid/encode?data%3Aimage%2Fjpeg%3Bbase64%2C%2F…hLGoZInTrWlH2qG7Az0okBRUnvTqXsaSoAKKKK0jsADrTqaOtOqgP%2F9k%3D&imageid=Test

这是底部小提琴中使用的代码

    $(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 = encodeURIComponent(dataUrl);
    //console.log(saveImage);

    fd.append("myFile", blob);
    xhr.open('POST', 'http://url.com/rest/v1/utils/guid/encode?' + saveImage + '&imageid=' + imageid.value, true);
    xhr.send(fd);
var image = $("<img><br>").attr({
        src: dataUrl
      });
      image.appendTo($(".result"))
      $button = $('<button class="btn btn-default remove">')
            .text('Remove')
            .on('click', function () {
                image.remove();
                $(this).remove();
                return false;
            });
        $button.appendTo($(".result"));
    });
  });
});

JSFIDDLE:JSFIDDLE

Answer 1

dataURItoBlob没有返回任何内容，它应该返回一个blob

return new Blob([ab], {type: 'image/jpeg'});

此外，为什么要将图像的数据url放在ajax post请求的url中？