How to create HTML 5 file with image (<img>) already loaded?

Question

Hi I have a page where I display a user profile image that loads as follows:

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

Now I need to send this image using the HTML 5 File API, but for this I need to first convert the image to a File API. All the samples that I saw on the Internet work together with input type = "file", but I already have this image, I do not select the image from the local computer.

All examples like this https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications use the file APIs from input type = "file" element

Answer 1

Do not confuse with the API files if the image already exists on the server, all you have to do is declare the <img> link to the image URL and display it:

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

Answer 2

The file is already on your server. You can use it, as Yair Nevet says.

If you really want to make it a File object, perhaps you can use it (I don't know if it works).

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

Using:

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

To get Blob from <canvas>

To make a Blob File -like