将文件输入作为 img 插入到 DOM 中 [英] Inserting a file input as an img in the DOM

查看:56
本文介绍了将文件输入作为 img 插入到 DOM 中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

两部分问题...

基本上,在一天结束时,我想要一个 file 并让用户从他们的文件系统中选择一个图片文件.然后我想将它显示在 img 标签中的页面上.我稍后需要处理它,所以我知道data: 不是要走的路,这似乎会留下blob:,我可以't 用我的 googlefu 弄清楚它是否是 X-origin.

那么 blob: 是否被视为 X 起源?如果我有一个 <img>@src 作为 blob: URI,我是否能够 getImageData() 就可以了?

如果是这样,那么您如何执行所有这些操作?我想如果有人知道如何做,这可能非常简单,但同样,我的 googlefu 使我失败了...

所以:

  • blob: X-origin?
  • 如果不是,如何从 file 的内容导出 blob: URI?

解决方案

使用 URL.createObjectURLFileBlob 对象生成 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 a file <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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆