0

为了避免 firefox 对大图像进行激进的去缓存/垃圾收集，我们一直在尝试存储对图像的引用的方法。保持对“new Image()”对象的引用似乎可行，但会占用大量内存。

我现在正在尝试使用

$.ajax({
   url: "http://localhost/360/img/frames/compressed/frame0470.jpg",
   dataType: "text",
   success: function(r) {
      console.log(r);
   }
});

检索图像的 base64 字符串（大概可以存储在比图像对象更少的内存中，并且不会受到 Firefox 的图像垃圾收集）。但是我怎样才能将它转换回 jpeg 呢？

4

2 回答 2

0

我也没有真正明白你想要实现的原因，但你应该能够在 XHR 中获取二进制数据，而不是将自己限制在 jQuery 提供的类型中。

首先，在此处阅读 MDC 文档以检索图像的正确二进制字符串 https://developer.mozilla.org/En/XMLHttpRequest/Using_XMLHttpRequest#Receiving_binary_data_in_older_browsers

其次，二进制字符串可以通过window.btoa().

三、base64图片字符串可以通过构造数据url来展示。我相信你已经知道该怎么做了。

与实际的二进制数据相比，二进制字符串需要多 4 倍的内存，因为字符串中的每个字符实际上是 4 个字节的内存，因为 Javascript 在内部使用 UCS-2。Base64 字符串花费 4*1.3=5.2 倍更多的内存。Base64 数据比原始数据大 130%。

在 Javascript 中处理二进制数据的一种巧妙方法是使用 Blob 对象。但无论如何我都没有看到将 Blob 显示为图像，所以......

如果您想避免激进的图像驱逐，我认为可能的方法是将图像粘贴到 <canvas> 元素并显示它。

<canvas> 实际带有一个内置函数toDataURL()，可以提供您想要的数据，但是如果您逃脱了图像驱逐，那么您就不需要它了。

于 2012-04-24T14:12:34.343 回答
0

我真的不明白你想要实现这一目标的原因，但要回答你的问题：

基本思路：

您需要将该数据编码为 Base64：

var base64Data = Base64.encode(r);

显示 Base64 图像：

$('<img>') // create new image
    .attr('src', 'data:image/jpeg;base64,' + base64Data) // set image data as b64
    .appendTo('body'); // add the image tag to the body element (or any other)

但实际上它似乎有点复杂：http ://emilsblog.lerch.org/2009/07/javascript-hacks-using-xhr-to-load.html

于 2012-04-24T12:26:42.007 回答