how to create HTML 5 File from image () already loaded?

Question

Hi I have a page where I show user's profile image that is loaded like this:

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

Now I need to submit this image using HTML 5 File API, but to do this I need to first convert my image to File API. All the samples that I saw at internet work together with input type="file", but I already have that image, I'm not choosing the image from local computer.

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

The preview that is referring to is most likely a preview BEFORE uploading it. If it's on your server you just load it like a normal image. Creating img tags in either html or through java script. — inquam, May 20 '15 at 21:54

score 3 · Answer 1 · edited May 23 '17 at 10:30

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

If you really want to make it a File object, maybe you can use this(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.
            };
    })();

Usage:

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

To get the Blob from a <canvas>

To make a Blob File-like

score 0 · Answer 2 · edited Feb 15 '16 at 19:16

0

Don't be confused with the File API, if the image already exists in the server, all left from you to do is to declare an <img> tag with a reference to the image URL and to display it:

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

edited Feb 15 '16 at 19:16

albert

8,112
3
47
63

answered May 20 '15 at 21:41

Yair Nevet

12,725
14
66
108

But it doesn't seem like previewing is what he wants. He already have the file uploaded on the server and just wish to display it. So I think he has confused the example with what he wants to do. – inquam May 20 '15 at 21:55

how to create HTML 5 File from image () already loaded?

2 Answers2