Question

我正在使用imgly图像裁剪器插件，稍微修改了我的应用程序。它目前将图像转换为dataUrl并将图像作为base64图像吐出，我可以将其保存为jpeg。我正在努力将dataURItoBlob找到的xhr.open('POST', '/', true);函数调整到我的应用中，这样我就可以将图像发布到API端点了。到目前为止我有以下内容，但我不确定如何将最终图像附加到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")); }); }); });

{{1}}

Answer 1

更新

“假设我将应用程序保持为相同的形式，我正在试图找出如何将dataURL转换为post函数。”

在http://jsfiddle.net/mattography/Lgduvce1/6/

处的第15-103行尝试

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

另见Handling_the_upload_process_for_a_file

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

1 个答案: