如何将图像从本地机器加载到 JS 对象避免加载到服务器答案

【问题标题】：How to load images from the local machine to JS object avoiding loading to the server如何将图像从本地机器加载到 JS 对象避免加载到服务器
【发布时间】：2017-01-20 21:31:39
【问题描述】：

我想在不使用任何服务器端组件的情况下，将计算机中的图像文件直接加载到任何 js 对象。例如，我想从本地机器中选择一张图片并显示在网页上。有没有办法避免文件上传到服务器？

事实上我想写一种多图像加载器，但在加载到服务器之前我想旋转一些图像，创建一个包含用户 ID、图像文件名列表等数据的 xml 文件并压缩所有图像和这个xml，然后将它发送到服务器。我怎样才能在客户端做到这一点？

【问题讨论】：

Load local image into browser using JavaScript?的可能重复
确实——这似乎是不可能的......

标签： javascript jquery

【解决方案1】：

HTML5 有一种方法，但它要求用户将文件拖放到放置目标中或使用<input type="file"/> 框，否则会出现安全问题。

使用File API 可以读取文件，具体可以使用FileReader.readAsDataURL 方法将内容设置为图片标签的data: URL。

这是一个例子：

$('#f').on('change', function(ev) {
    var f = ev.target.files[0];
    var fr = new FileReader();

    fr.onload = function(ev2) {
        console.dir(ev2);
        $('#i').attr('src', ev2.target.result);
    };

    fr.readAsDataURL(f);
});

http://jsfiddle.net/alnitak/Qszjg/

【讨论】：

跨域规则有什么关系？
@Christian 因为如果您从 http:/// 加载页面，它们会限制对 file:/// 的访问。
我看不出这有什么关系，因为他没有尝试访问其他页面或类似的东西。虽然存在访问服务器方面的跨域策略，但您始终可以将内容放入表单并动态发布。
@Christian 这就是我试图就用户交互提出的观点。您可以让用户将内容放入表单中，并使用 HTML5 File 让浏览器对其进行处理。 AFAIK 你不能在没有用户自己选择文件的情况下启动代码来读取文件。
这与跨域策略无关，完全是另外一回事。

【解决方案2】：

使用new File APIs，可以从本地磁盘访问内容。

您在页面上放置一个传统的<input type="file"> 上传字段，并处理onchange 事件。

MDN has a good writeup with all of the details.

您的事件处理程序获得一个包含Files 的FileList。从那里，您可以调用 FileReader.readAsDataURL(File) 来获取图像的内容，然后将该数据 URL 传递给 <img> 或 <canvas> 以进行旋转。

【讨论】：

【解决方案3】：

你可以使用window.URL对象的createObjectURL方法，不过浏览器支持的不多

http://jsfiddle.net/LvAqp/ 仅适用于 chrome 和 firefox

【讨论】：