Javascript 将dataUrl转换为blob并通过ajax提交

我正在使用imgly图像裁剪器插件，为我的应用程序稍微修改了一下。它当前将图像转换为

dataUrl

，并将图像作为base64图像输出，我可以将其另存为jpeg。我正在将找到的

dataURItoBlob

函数调整到我的应用程序中，以便将图像发布到API端点。到目前为止，我有以下内容，但我不确定如何将最终图像附加到

xhr.open（'POST'，'/'，true）中

renderButton.点击（函数（事件）{
var dataUrl=
renderToDataURL（“image/jpeg”，{size:“1200”}，函数（err，dataUrl）{
//将DataURL转换为Blob以通过Ajax发送
函数dataURItoBlob（dataUrl）{
//将base64转换为字符串中的原始二进制数据
//不处理URLEncoded数据URI-请参阅SO答案#6850276以了解执行此操作的代码
var byteString=atob（dataUrl.split（'，'）[1]）；
//分离出mime组件
var mimeString=dataUrl.split（'，'）[0]。split（'：'）[1]。split（'；'）[0]；
//将字符串的字节写入ArrayBuffer
var ab=新阵列缓冲区（byteString.length）；
var ia=新的UINT8阵列（ab）；
for（var i=0；i
已更新

“假设我将应用程序保持在相同的形式，我将尝试找出如何将dataURL放入post函数中。”

试试看，在第15-103行

var blob；//声明`blob`
//一旦用户选择一个文件。。。
fileInput.addEventListener（“更改”，函数（事件）{
var file；//声明'file`
var fileToBlob=event.target.files[0]；
blob=newblob（[fileToBlob]，{“type”：fileToBlob.type}）；
//用水滴做东西
控制台日志（blob）；
//查找所选文件
if（event.target.files）{
file=event.target.files[0]；
}否则{
file=event.target.value；
}
//使用FileReader打开所选文件
//文件转换为数据url。ImglyKit需要
//数据url或图像
var reader=new FileReader（）；
reader.onload=（函数（文件）{
返回函数（e）{
数据=e.target.result；
//使用所选文件运行ImglyKit
试一试{
imgly.run（数据）；
}捕获（e）{
如果（例如，名称=“无支持错误”）{
警报（“您的浏览器不支持画布。”）；
}否则如果（e.name==“InvalidError”）{
警报（“给定文件不是图像”）；
}
}
};
})（文件）；
reader.readAsDataURL（文件）；
});
//用户单击“渲染”按钮后。。。
//侦听“渲染最终图像”并单击
renderButton.单击（函数（事件）{
var-dataUrl；
renderToDataURL（“image/jpeg”，{size:“1200”}
，函数（错误，数据URL）{
//`dataUrl`现在包含一个具有
//宽度为300像素，同时保持比例不变
//将DataURL转换为Blob以通过Ajax发送
//函数dataURItoBlob（dataUrl）{
//将base64转换为字符串中的原始二进制数据
//不处理URL编码的数据URI
//-有关执行此操作的代码，请参见SO答案6850276
//var byteString=atob（dataUrl.split（'，'）[1]）；
//分离出mime组件
//var mimeString=dataUrl.split（'，'）[0]。split（'：'）[1]。split（'；'）[0]；
//将字符串的字节写入ArrayBuffer
//var ab=新阵列缓冲区（byteString.length）；
//var ia=新的UINT8阵列（ab）；
//for（var i=0；i

另请参见
See我使用“dataURLToBlob:function（dataURL）”更新了函数，但它不允许加载图像，并在单击渲染按钮之前显示results div。我创建了一个摆弄所有使用的js的工具：
html
？在“Frameworks&Extensions”加载jquery"我已经用所有的JS和UI更新了fiddle：谢谢！我现在已经在解决方案中找到了它，但我正在尝试找出如何在用户点击渲染按钮后将其转换为blob，而不仅仅是加载图像。它还需要仅在用户点击新附加的提交按钮时发布s修订的fiddle:
var blob=dataURItoBlob（d
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"));
    });
  });
});

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