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

【问题标题】：How to get all images from a website and replace them with base64 encodings?如何从网站获取所有图像并用 base64 编码替换它们？
【发布时间】：2012-05-31 22:38:45
【问题描述】：

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

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

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

【问题讨论】：

你能更精确一点吗？是什么阻止你简单地去做？你为什么要这样做？内联资源？
What have you tried?
你为什么想要那个？或者您是否想到了服务器端（非 JavaScript！）解决方案？
你想在服务器端还是客户端？做那个客户端似乎没有意义......

标签： javascript base64

【解决方案1】：

首先——我不确定这是否特别适用于你的情况——记住data URI 不是supported IE ≤ 7 并且 IE 8 的支持不稳定；并且可以有many disadvantages 来使用data URI。

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

我找到了this tool，它将用它的data URI 表示替换样式表中的所有图像引用。

我在 HTML 页面中没有看到对 <img>s 做同样的事情，但是 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 有更深入的信息。

【讨论】：

【解决方案2】：

类似这样的：

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/

【讨论】：