jak wczytać plik HTML 5 z obrazu (<img>)?

Question

Cześć Mam stronę, gdzie mogę pokazać obraz profilu użytkownika, który jest załadowany tak:

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

Teraz muszę złożyć. ten obraz przy użyciu interfejsu API HTML 5, ale aby to zrobić, muszę najpierw przekonwertować mój obraz do interfejsu API pliku. Wszystkie próbki, które widziałem w Internecie, działają razem z typem wejściowym = "plik", ale już mam ten obraz, nie wybieram obrazu z komputera lokalnego.

Wszystkie przykłady jak ten https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications API plik z input type = „file” elementu

Answer 1

Nie należy mylić z API pliku, jeśli obraz już istnieje na serwerze, wszystko na lewo od ciebie zrobić, to zadeklarować <img> tag z odniesieniem do zawartości obrazu i aby go wyświetlić:

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

Answer 2

plik jest już na serwerze. Możesz go użyć, jak mówi Yair Nevet.

Jeśli naprawdę chcesz zrobić obiekt File, może możesz go użyć (nie wiem, czy to działa).

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

Zastosowanie:

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

To get the Blob from a <canvas>

To make a BlobFile-like