9

我正在尝试克隆随机生成的图像。尽管我使用的是完全相同的 url，但加载了不同的图像。（在 chrome 和 firefox 中测试）

我无法更改图像服务器，所以我正在寻找一个纯 javascript/jQuery 解决方案。

你如何强制浏览器重用第一张图片？

火狐： 火狐演示

铬合金： 铬演示

自己试试（可能要重载几次才能看到）

代码：http: //jsfiddle.net/TRUBK/

$("<img/>").attr('src', img_src)
$("<div/>").css('background', background)
$("#source").clone()

演示：http: //jsfiddle.net/TRUBK/embedded/result/

4

8 回答 8

6

如果图像服务器不是您的，您无法更改它，但是您可以在自己的服务器上简单地编写一些东西来为您处理它。

首先用您选择的服务器端语言（PHP、ASP.NET 等）编写一些内容：

  1. 点击http://a.random-image.net/handler.aspx?username=chaosdragon&randomizername=goat&random=292.3402&fromrandomrandomizer=yes并下载它。您可以通过两种方式之一生成密钥。要么得到整个事情的散列（MD5应该没问题，它不是与安全相关的用途，所以担心它现在太弱不适用）。或获取图像的大小 - 后者可能有一些重复，但生成速度更快。
  2. 如果图像尚未存储，请将其保存在一个位置，使用该键作为文件名的一部分，并将内容类型作为另一部分（以防 JPEG 和 PNG 混合使用）
  3. 使用带有 URI 的 XML 或 JSON 响应响应下一阶段。

在您的客户端代码中，您通过 XmlHttpRequest 访问该 URI 以获取与您的图像一起使用的 URI。如果您想要一个新的随机图像，请再次点击第一个 URI，如果您想要两个或多个位置的相同图像，请使用相同的结果。

该 URI 命中类似于http://yourserver/storedRandImage?id=XXXXXX 是键的位置（如上所述的哈希或大小）。该处理程序查找图像的存储副本，并将文件发送到响应流中，并具有正确的内容类型。

从技术上讲，这一切都非常简单，但可能的问题是合法的，因为您将图像的副本存储在另一台服务器上，您可能不再符合与发送随机图像的服务协议的条款。

于 2012-08-16T09:14:10.273 回答
1

从您的随机图像生成器脚本发送的标头包含一个Cache-Control: max-age=0声明，该声明本质上是告诉浏览器不要缓存图像。

如果要缓存结果，则需要修改图像生成器脚本/服务器以发送正确的缓存标头。

您还需要确保 URL 保持不变（我没有查看这方面的内容，因为传递了很多参数）。

于 2012-08-10T18:57:55.450 回答
1

首先，您可以“强制”网络上的任何内容。如果您需要强制执行，那么 Web 开发不适合您。

您可以尝试的是使用canvas元素来复制图像。有关示例，请参见https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images。

于 2012-08-16T08:42:19.633 回答
1

似乎有两种解决方法：

  1. 如果您使用 Canvas 方法，请查看是否可以将图像加载到 Canvas 本身，以便您可以直接操作图像数据，而不是对图像进行第二次 http 请求。您可以将图像数据直接馈送到第二个画布上。
  2. 如果您要构建代理，您可以让代理删除 No-Cache 指令，以便浏览器的后续请求使用缓存（此处不保证 - 取决于浏览器/用户设置）。
于 2012-08-22T12:09:00.383 回答
1

您可以尝试保存图像的 base64 表示。

将图像加载到隐藏的 div/canvas 中，然后将其转换为 base64。（我不确定是否可以隐藏画布，也不确定是否可以使用 html4 标签转换 img）现在您可以将“字符串化”图像存储在 cookie 中，并无限次使用它......

于 2012-08-22T12:01:11.550 回答
0

告诉它停止获取随机图像，当我添加第三个替换调用时，它似乎可以按照您想要的方式工作：

// Get the canvas element.
var background = ($("#test").css('background-image')),
img_src = background.replace(/^.+\('?"?/, '').replace(/'?"?\).*$/, '').replace(/&fromrandomrandomizer=yes/,'')
于 2012-08-10T19:09:02.790 回答
0

尝试：

var myImg = new Image();
myImg.src = img_src;

然后将“myImg”附加到您想要的位置：

$(document).append(myImg);
于 2012-08-10T19:17:52.453 回答
0

我用你的提琴手脚本做了这个，每次都得到相同的图像

#test {
background:url(http://a.random-image.net.nyud.net/handler.aspx?username=chaosdragon&randomizername=goat&random=292.3402&fromrandomrandomizer=yes);
width: 150px;
height: 150px;

}

注意域名后面的.nyud.net。

于 2012-08-21T21:18:00.387 回答