通过AJAX调用使用图片URL获取数据？

Question

通过AJAX调用使用图片URL获取数据？

3

我有以下的AJAX调用，用于从本地目录获取图片：

var imagesArray = [];
$.ajax({
            url: "./images/",
            success: function(data){
            $(data).find("a:contains(.jpg)").each(function(){
            var images = $(this).attr("href");
            imagesArray.push(images);
            });
            for(var i=0;i<imagesArray.length;;i++)
            {
        var str = 'images/'+imagesArray[i];                 
         $('<li class="slide">').append($('<img />').attr('src',str )).appendTo('#slider');
                }
            }
            });

我的HTML代码如下：

<html>
<body>
<div id="imageList">
<ul id="slider"></ul>
</div>
</body>
`

我在本地目录中获取图像，并将其存储在列表中并显示相同的内容。
如何获取每个图像的exif数据（在这里，我看到了一些链接，其中有拖放选项：拖放图像获取exif），
使用的js是：exif.js

- kks

如果您加载多个图像的二进制数据，我非常确定您的浏览器会崩溃。 - Dustin Hoffner

感谢@Dustin Hoffner，能否提供一下使用img标签或URL获取图像元数据详细信息的代码。 - kks

你能说一下你想要加载哪些元数据吗？ - Dustin Hoffner

图像文件 --> 右键单击 --> 属性 --> 详细信息 --> 原始信息（拍摄日期）和相机标记、型号以及 GPS（如果可能）仅限于这些。 - kks

嗯...我认为这不是你应该在客户端完成的任务。我会在服务端使用nodejs或php等语言来实现，并通过json发送给客户端。 - Dustin Hoffner

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andrew Spode · Accepted Answer

可以使用AJAX请求中的新的“blob”支持来实现。我使用这种方法下载超过2GB的视频，然后使用文件系统API将其存储到磁盘上。

以下是代码片段，摘自此StackOverflow线程。使用jQuery的ajax方法将图像作为blob检索

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if (this.readyState == 4 && this.status == 200){
        //this.response is what you're looking for
        handler(this.response);
        console.log(this.response, typeof this.response);
        var img = document.getElementById('img');
        var url = window.URL || window.webkitURL;
        img.src = url.createObjectURL(this.response);
        }
    }
xhr.open('GET', 'http://jsfiddle.net/img/logo.png');
xhr.responseType = 'blob';
xhr.send();

然而，这可能不是最佳方法——加载如此多的数据只为了获取EXIF信息。

您可能需要考虑将后端元素纳入此项目。您可以轻松/快速地提取EXIF数据（无需加载整个图像）并缓存结果。您还可以自动创建缩略图以加快页面加载速度。