将文件输入作为 img 插入 DOM 中

两部分问题...

基本上，在一天结束时，我想要一个file <input>并让用户从他们的文件系统中选择一个图片文件。然后我想将其显示在页面上的 img 标签中。我稍后需要处理它，所以我知道data:这条路不是要走下去的，看起来就像是离开了blob:，我无法用我的 googlefu 弄清楚它是否是 X-origin。

So is blob:考虑X原点吗？如果我有一个<img>'s @src as a blob:URI，我可以吗getImageData() on it?

如果是这样，那么你如何实现这一切呢？我想，如果有人知道怎么做，那可能会非常简单，但我的 googlefu 又让我失望了......

So:

• is blob:X原点？
• 如果不是，如何得出blob:URI 来自file <input>的内容？

Use URL.createObjectURL https://developer.mozilla.org/en/DOM/window.URL.createObjectURL生成一个blob:-来自 a 的 URIFile or Blob object:

基本演示：http://jsfiddle.net/HGXDT/ 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;
};​

用于检查脚本是否受到同源策略影响的代码（答案：事实并非如此）。 （实际上，页面本身不受影响，因为它创建了blob:-URI，但其他页面无法绘制blob:画布上的 URI 并使用它）：
http://jsfiddle.net/HGXDT/1/ 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;
}