Question

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

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

为什么：我想基于RSS源创建电子书（mobi）。我已经将内容转换为HTML，但图像需要是本地的才能显示。替换图像base64看起来是最好的解决方案。

Answer 1

首先 - 我不确定这是否特别适用于您的情况 - 请记住IE {7的data URI不是supported且IE 8的支持是不稳定的;并且可以many disadvantages使用data URI。

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

我发现this tool将替换样式表中所有带有data URI表示的图像引用。

我没有看到HTML页面中<img>的任何内容也是如此，it wouldn't be hard to build something that does what you need。

或者 - 并且考虑到base64编码所有图像将使文件大小增加33％ - 您可以使用HTML5 app cache，其设计用于脱机运行HTML页面，works除了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 article about app caches有更深入的信息。

Answer 2

这样的事情：

jQuery + canvas：

$("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/

如何从网站获取所有图像并用base64编码替换它们？

2 个答案: