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

Question

两部分问题......

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

那么被blob:认为是X原点？如果我有一个<img>的@src作为一个blob:URI,我就能getImageData()上呢？

如果是这样,那你怎么把这一切都拿出来？我想如果一个人知道怎么做,那可能很简单,但是我的googlefu再次失败了......

所以:

• 是blob:X原点？
• 如果没有,如何blob:从file <input>内容中获取URI ？

Answer 1

用于从或对象URL.createObjectURL生成blob:-URI :FileBlob

基本演示: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/

<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;
}