javascript - 在 DOM 中插入文件输入作为 img

Question

两部分问题...

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

blob:也是如此考虑 X 源？如果我有一个 <img>的 @src作为blob: URI，我可以getImageData()在上面吗？

如果是这样，那么您如何执行所有这些操作？我想如果有人知道怎么做，那可能会非常简单，但是我的 googlefu 还是让我失望了......

所以:

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

Answer 1

使用URL.createObjectURL从 File 或 Blob 对象生成 blob:-URI:

基本演示: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，但其他页面无法在 Canvas 上绘制 blob: URI 并使用它):
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;
}