将文件输入作为 img 插入到 DOM 中 [英] Inserting a file input as an img in the DOM
问题描述
两部分问题...
基本上,在一天结束时,我想要一个 file
并让用户从他们的文件系统中选择一个图片文件.然后我想将它显示在 img 标签中的页面上.我稍后需要处理它,所以我知道
data:
不是要走的路,这似乎会留下blob:
,我可以't 用我的 googlefu 弄清楚它是否是 X-origin.
那么 blob:
是否被视为 X 起源?如果我有一个 <img>
的 @src
作为 blob:
URI,我是否能够 getImageData()
就可以了?
如果是这样,那么您如何执行所有这些操作?我想如果有人知道如何做,这可能非常简单,但同样,我的 googlefu 使我失败了...
所以:
- 是
blob:
X-origin? - 如果不是,如何从
file
的内容导出
blob:
URI?
使用 URL.createObjectURL
从 File
或 Blob
对象生成 blob:
-URI:>
基本演示:http://jsfiddle.net/HGXDT/
<input type="file" id="file"> <img id="预览">window.URL = window.URL ||window.webkitURL ||window.mozURL;document.getElementById('file') .onchange = function() {var url = URL.createObjectURL(this.files[0]);控制台日志(网址);document.getElementById('preview').src = url;};
用于检查脚本是否受到同源策略影响的代码(答案:没有).(实际上,页面本身不受影响,因为它创建了 blob:
-URI,但其他页面无法在画布上绘制 blob:
URI 并使用它):
http://jsfiddle.net/HGXDT/1/
<img id="预览"><canvas id="canvas"></canvas>window.URL = window.URL ||window.webkitURL ||window.mozURL;document.getElementById('file').onchange = function() {var url = URL.createObjectURL(this.files[0]);控制台日志(网址);var img = document.getElementById('预览');canvasSOPTest(img, url);};//见控制台.必须出现 SOP 错误canvasSOPTest(new Image(), 'http://stackoverflow.com/favicon.ico?'+new Date());函数 canvasSOPTest(img, url) {//同源策略检查img.onload = 函数(){var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');console.log('绘画图像...');ctx.drawImage(img, 0, 0);console.log('正在尝试获取图像数据');尝试 {ctx.getImageData(0, 0, canvas.width, canvas.height);console.log('成功!没有错误');}赶上(e){控制台日志(e);}};img.src = url;}
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 afile
<input>
's contents?
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;
}
这篇关于将文件输入作为 img 插入到 DOM 中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!