Inserting a file input as an img in the DOM

Question

Two part question...

Basically, at the end of the day, I want to have a file <input> and let the user select a picture file from their filesystem. Then I want to display it back out on the page in an img tag. I'll need to process it later, so I know data: isn't the road to be going down, which seems like it leaves blob:, which I can't figure out with my googlefu whether it's X-origin or not.

So is blob: considered X-origin? If I have an <img>'s @src as a blob: URI, will I be able to getImageData() on it?

If so, then how do you carry all this out? I imagine that if one knows how, it is probably very straightforward but again, my googlefu is failing me...

So:

• is blob: X-origin?
• if not, how does one derive a blob: URI from a file <input>'s contents?

Answer 1

Use URL.createObjectURL to generate a blob:-URI from a File or Blob object:

Basic demo: http://jsfiddle.net/HGXDT/

​<input type="file" id="file">​​​​​​​​​​​​​​<img id="preview">​​​​​​​​​​​​​​

window.URL = window.URL || window.webkitURL || window.mozURL;
document.getElementById('file')​.onchange = function() {
    var url = URL.createObjectURL(this.files[0]);
    console.log(url);
    document.getElementById('preview').src = url;
};​

Code to check whether the script suffers from the Same origin policy or not (answer: it doesn't). (actually, the page itself is not affected, because it created the blob:-URI, but other pages cannot draw the blob: URI on a canvas and use it):
http://jsfiddle.net/HGXDT/1/

<input type="file" id="file">
<img id="preview">
<canvas id="canvas"></canvas>
​
window.URL = window.URL || window.webkitURL || window.mozURL;
document.getElementById('file').onchange = function() {
    var url = URL.createObjectURL(this.files[0]);
    console.log(url);
    
    var img = document.getElementById('preview');
    canvasSOPTest(img, url);
};
// See console. SOP error has to show up
canvasSOPTest(new Image(), 'http://stackoverflow.com/favicon.ico?'+new Date());

function canvasSOPTest(img, url) {
    // Same Origin Policy check
    img.onload = function() {
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        console.log('Painting image...');
        ctx.drawImage(img, 0, 0);
        console.log('Attempting to get image data');
        try {
            ctx.getImageData(0, 0, canvas.width, canvas.height);
            console.log('Success! No errors');
        } catch (e) {
            console.log(e);
        }
    };
    img.src = url;
}

Answer 2

What you want is use the HTML5 File Api to display an image and then upload that image or else?

This is a good example of how use File Api to preview images.

http://html5demos.com/file-api/