-1

如何从特定网站获取所有图像并将其替换为 base64 编码？服务器端解决方案将起作用。像：

var img = document.querySelectorAll("img");
for (var i = 0; i < img.length; i++) {
    //replace with base64 encoding
}

原因：我想创建一个基于 RSS 提要的电子书 (mobi)。我已经将内容转换为 HTML，但图像需要在本地显示。替换图像 base64 看起来是最好的解决方案。

4

2 回答 2

1

首先——我不确定这是否特别适用于您的情况——请记住IE ≤ 7data不支持URI ，并且 IE 8 的支持不稳定；并且使用URI可能有很多缺点。data

也就是说，有两个地方需要担心：<img>标签和 CSS 文件。

我发现这个工具data可以用它的URI 表示替换样式表中的所有图像引用。

<img>在 HTML 页面中，我没有看到任何对 s 做同样的事情，但构建可以满足您需要的东西并不难。

或者——考虑到对所有图像进行 base64 编码会使文件大小膨胀 33%——你可以使用HTML5 应用程序缓存，它专为离线运行 HTML 页面而设计，适用于除 IE ≤ 9 之外的所有内容。（这是我的方法会用。）

只需向元素添加一个manifest属性：<html>

<html manifest="files.appcache">
    ...
</html>

files.appcache是一个简单的文本文件：

CACHE MANIFEST
http://www.example.com/index.html
http://www.example.com/header.png
http://www.example.com/blah/blah

MDN 关于应用程序缓存的文章有更深入的信息。

于 2012-05-31T14:38:45.977 回答
0

像这样的东西：

jQuery + 画布：

$("img").load(function(i) {
    var $this = $(this),
        jCanvas = $("<canvas width='" + $this.width() + "' height='" + $this.height() + "'/>"),
        oCanvas = jCanvas[0];

    oCanvas.getContext("2d").drawImage(this, 0, 0);

    this.src = oCanvas.toDataURL();
});

但这仅在图像与脚本位于同一域时才有效。

演示：http: //jsfiddle.net/K5RY3/3/

于 2012-05-30T16:44:14.190 回答