come creare il file HTML 5 dall'immagine (<img>) già caricato?

Question

Ciao ho una pagina in cui mi mostra immagini di profilo utente che viene caricato in questo modo:

$ ("# imgProfile") attr ('src', 'http://myserver/user.png')

Ora ho bisogno di inviare. questa immagine utilizza l'API di file HTML 5, ma per farlo devo prima convertire la mia immagine in File API. Tutti i campioni che ho visto su Internet funzionano insieme con input type = "file", ma ho già quell'immagine, non sto scegliendo l'immagine dal computer locale.

Tutti gli esempi come questo https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications uso API File da input type = elemento "file"

Answer 1

Non essere confuso con l'API File, se l'immagine esiste già nel server, tutto a sinistra da voi per fare è dichiarare un tag <img> con un riferimento l'URL dell'immagine e per visualizzarla:

<img src="serverAddress\yourImage.png" alt="Image Something" /> 

Answer 2

il file è già presente sul server. Puoi usarlo, come dice la risposta di Yair Nevet.

Se si vuole davvero trasformarlo in un oggetto File, forse è possibile utilizzarlo (non so se funziona).

var getFilelikeBlobFromImageElement = (function closure() { 
     var canvasElement = document.createElement("canvas"); 

     return function(imageElement) { 
       canvasElement.width = imageElement.width; 
       canvasElement.height = imageElement.height; 
       var canvasContext = canvasElement.getContext("2d"); 
       canvasContext.drawImage(imageElement, 0, 0); 

       var imageData = canvasContext.getImageData(0, 0, imageElement.width, imageElement.height).data; 
       var buffer = new Uint8Array(imageData.length); 
       for(var index = 0; index < imageData.length; index++) 
        buffer[index] = imageData[index]; 

       var imageBlob = new Blob(buffer); 
       imageBlob.lastModifiedDate = new Date(); 
       imageBlob.name = /\/([^\/]+)$/.exec(imageElement.src)[1]; 

       return imageBlob; // A `File`-like `Blob` object. 
      }; 
    })(); 

Usage:

getFilelikeBlobFromImageElement(document.getElementById("imgProfile")); 

To get the Blob from a <canvas>

To make a BlobFile-like