Question

我有以下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数据。（这里有一些我看到的有drog＆amp; drop选项的链接：drag & drop image getting exif），
使用的js是：exif.js

Answer 1

完全有可能使用新的＆＃34; blob＆＃34;支持AJAX请求。我使用此方法下载超过2GB的视频，然后使用Filesystem API存储到磁盘。

这是一个代码片段，取自此溢出StackOverflow线程。

Using jQuery's ajax method to retrieve images as a 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数据（无需加载整个图像）并缓存结果。您还可以自动创建缩略图，以使您的页面加载速度更快。

使用AJAX调用的图像URL获取数据？

1 个答案: