两部分问题...
基本上，在一天结束的时候，我想要一个file <input>并让用户从他们的文件系统中选择一个图片文件。然后我想将它显示在页面上的 img 标签中。稍后我需要处理它，所以我知道data:这条路不会走，似乎它离开blob:了，我无法用我的 googlefu 弄清楚它是否是 X 起源。
那么被blob:认为是X起源吗？如果我有一个<img>'s@src作为blob:URI，我可以getImageData()使用它吗？
如果是这样，那么你如何进行这一切？我想如果有人知道怎么做，那可能很简单，但我的 googlefu 又让我失望了……
所以：
blob:X起源吗？blob:从 a 的内容派生 URI file <input>？用于从or对象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;
}
您想要的是使用 HTML5 File Api 显示图像，然后上传该图像或其他？
这是如何使用 File Api 预览图像的一个很好的例子。