從外部圖像創建一個Blob url

Question

我有一個文件輸入，我用來獲取文件並將它變成一個blob。無論如何，我可以得到一個外部圖像網址，並把它變成一個blob？這裏是我使用僅僅用一個文件來做到這一點，代碼從<input type="file" />：

//Process the file and resize it. 
     function processfile(file) { 

      if (!(/image/i).test(file.type)) { 
       alert("File " + file.name + " is not an image."); 
       return false; 
      } 

      // read the files 
      var reader = new FileReader(); 
      reader.readAsArrayBuffer(file); 

      reader.onload = function (event) { 
       // blob stuff 
       var blob = new Blob([event.target.result]); // create blob... 
       window.URL = window.URL || window.webkitURL; 
       var blobURL = window.URL.createObjectURL(blob); // and get it's URL 

       // helper Image object 
       var image = new Image(); 
       image.src = blobURL; 
       image.onload = function() { 

        for (var x = 0; x < self.ThumbSizes.length; x++) { 
         // have to wait till it's loaded 
         var resized = resizeMe(image, self.ThumbSizes[x]); // send it to canvas 
         var resized_blob = dataURItoBlob(resized); 
         uploadFile(resized_blob, self.ThumbSizes[x].Name); 
        } 
       } 
      }; 

不是傳遞文件通過我希望能夠構建這個代碼通過一個圖像的URL，並將其轉換成斑點。

Answer 1

我希望它可以幫助你。 （我沒有運行它。）

function processfile(imageURL) { 
    var image = new Image(); 
    var onload = function() { 
     var canvas = document.createElement("canvas"); 
     canvas.width =this.width; 
     canvas.height =this.height; 

     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(this, 0, 0); 

     canvas.toBlob(function(blob) { 
      // do stuff with blob 
     }); 
    }; 

    image.onload = onload; 
    image.src = imageURL; 
}