1

我有一个简单的 Rails 应用程序，它使用canvasContext.toDataURL(). 有一个 index 动作，它显示缩略图列表，以及一个显示每个图像的动作，显示图像。

我这里的后端绝对是懒惰的，我只是存储了data:image/png;base64,...原始图像的base64编码字符串和一个缩略图，这也是在客户端生成的。图像使用<img src="data:"/>URI 包含在页面中。

现在，由于在 v9 之前的 IE 中不完全支持这一点，我将不得不实现某种解决方法，可能通过使用data-属性包含生成图像的 URL，然后在页面加载后使用 jQuery 替换源属性。

data:这就提出了一个问题，使用URL将相当大的图像内联到 HTML 中是否是一种好习惯......

有什么建议或最佳实践吗？图像可能高达 500 KiB，并且每个图像仅使用一次。包含图像的页面一旦创建就不会更改，因此它应该可以很好地缓存，包括图像。包含缩略图的索引页面（大约 60 KiB）使用分页，因此该页面几乎不可缓存。您可以假设 HTML 页面在生产中会被压缩或压缩。

4

3 回答 3

1

这不是一个好主意。我会改用普通的、单独的图像资源。

通过使用内嵌图像，

  • 您破坏了静态图像的所有可缓存性 - 对于内联图像，每次 HTML 页面更改时，所有图像数据也必须重新加载。

  • gzipping/deflating 将花费更长的时间，并产生次优结果（因为图像数据更难压缩，效率也更低）。

  • 互联网的其余部分面向 HTML 文档和图像作为单独的资源：预取器、缓存系统、代理......

  • 那么你就有了浏览器兼容性，正如你所指出的，这对于旧的 IE 来说是非常糟糕的。

于 2012-08-13T13:12:21.157 回答
1

最佳做法是：不要。

无论如何，您都需要一个解决方法，这将完全复制基本功能，因此您只是另一个可能出错的地方，并且需要测试更多案例。

您说图像应该非常可缓存，但是您发送它们的方式不允许您包含有关缓存的信息。但是，使用通过单独的 HTTP 请求发送图像的更常见方法，您可以发送 expires 和 max-age 请求以指示图像在一年内不会更改。如果您对图像不会更改非常有信心，您还可以设置最后修改和电子标签（您甚至不需要任何逻辑来决定电子标签，只需发送“IMMUTABLE”作为标签) 并通过发送 304 甚至不检查来响应每个条件 GET（因为同样，如果你非常自信，你只会这样做，否则尽管你仍然可以对 304 实施更传统的检查）。

如果图像只使用一次，则让图像由创建它的东西提供，并根据查询中的一些识别特征（正是你正在做的事情）写入它，并将其写入到浏览器的流中。您仍然可以在应用程序中进行更好的分离，以便在自己的位置完成此操作。

即使使用 gzip，您也不会在流大小上击败它。

于 2012-08-13T13:18:51.873 回答
0

我的建议 ？不要这样做。

使用后端库可以更轻松地修改真实文件，所以不要这样做。如果您想在页面中使用 base64，您可以使用 HTML5 轻松实现。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'images/myimage.png', true);
xhr.responseType = 'arraybuffer';

xhr.onload = function(e){
    if(this.status == 200){
        var bb = new WebKitBlobBuilder(); // Or MozBlobBuilder, MSBlobBuilder, etc.
        bb.append(this.response);

        var reader = new FileReader();
        reader.readAsDataURL(bb.getBlob('image/png'));
        reader.onloadend = function(e){
            $("#myimage").attr("src", reader.result);
        };
    }
};

xhr.send();
于 2012-08-13T18:20:01.953 回答