通过Ajax请求获取图像和相关元数据

更新2:

如果两个进程共享相同的资源URL,则可以将元数据作为自定义HTTP头发送。不过,我不完全确定以下技术。

1. 向图像URL发送Ajax请求。这将允许您读取HTTP响应头。
2. 当Ajax调用完成时,将一个与Ajax调用中的图像具有相同URL的图像插入到DOM中。
3. 现在,这是未经测试的部分。如果浏览器在由xmlhttpRequest对象或img对象启动的请求之间没有区别,那么在插入图像时就不会有其他请求。这就是浏览器内的解决方案。缓存代理将确保请求相同资源的其他客户机将获得URL的缓存版本。

无论如何,即使浏览器机制不起作用,至少缓存代理有机会缓存单个响应,而不是两个响应。

阿尔索 ,虽然您说过不想使用base64编码的图像,但是 techniques to determine whether a browser supports them 或者没有。然后,您可以将它们用于足够智能的浏览器,并为其他浏览器牺牲一个双重请求。至少没有那么糟。

更新1(不再适用):

如果您已经依赖缓存代理和max-age头,那么这就是我要做的:

1. 启动一个Ajax请求来提取元数据。元数据将包含图像的URL。
2. 在DOM中插入具有上述URL的新图像。
3. 让浏览器决定是否提取该图像资源(它可能从浏览器缓存中提取)。这种机制 应该 在正常情况下,当您从服务器输出一个img标记时,也要这样做。
4. 如果只想在图像加载后显示元数据,请使用图像对象的onload事件。还有一个OnError事件。

旧答案(不再适用):

我不太明白你所说的“生成图像”是什么意思,但我假设你只是想把图像的URL发送回网页。在这种情况下,您可以使用JSON发送图像URL和元数据。这样地:

{
    "url" : "http://example.com/image.png",
    "meta" : {
        "type"   : "png",
        "width"  : "200px",
        "height" : "200px"
    }
}

一旦两个服务器端操作完成,就会发送此响应。您可以用一个Ajax请求来初始化这两个脚本,并同时获得图像URL和元数据的响应。然后,在客户端,您可以很容易地阅读它们:

var response  = eval(xhr.responseText);
var url       = response.url;
var imageType = response.meta.type;

上述情况将发生在onreadyStateChange处理程序中。如果你用的是图书馆,事情会简单一点。

最好的方法是创建一个新的封装对象,它将这两个对象都作为属性返回。所以imagecontainer.image和imagecontainer.metadata将为您提供所需的。

我回答了一个类似的问题 here .