base64轉換的data：URL圖像斑點

Question

我有一個形象的農作物，它接受一個圖像中，立即將其轉換爲一個blob

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

加載到畫布前。剪切後，圖像以base64格式輸出。我需要能夠將base64圖像轉換回blob或圖像，所以我可以通過AJAX將圖像POST轉換爲API端點。我有以下所有這一切，但我無法弄清楚如何將渲染圖像轉換回blob到POST。用來POST當前的URL，看起來像這樣在控制檯打渲染後，使用encodeURIComponent(dataUrl)：

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中？