html - 多个base64文件合二为一

Question

你能在 this JS fiddle 上将这两张图片合并成一个外部文件吗？并以图片形式链接到它们？

有点像

<img src="base64.html#img1" />
<img src="base64.html#img2" />

---

我确实看到了这个答案，但它没有提供示例
Can multiple base64 documents be stored in a single file?

---

如何在文件名中使用一个点并以某种方式使文件认为它是一个不同的文件名，例如 base64.img1.html 并以某种方式使用文件头将它们拆分成一个文件但不同的部分。

---

好吧，新想法.. 如果有一种方法可以指定 charStart 和 charEnd 会怎么样？假设有 2 个 base64 编码的文件，然后你调用其中一个

base64.0-3214.html // for one file (like font.woff)
base64.3215-5673.html // for another file (like demo.jpg)

Answer 1

可以将所有资源(JavaScript、CSS、字体、图像)放在一个大的(可缓存的)JavaScript 文件中。该文件看起来很乱(因为一些冗长的 CSS 和 Base64 字符串)，但不要因此而失望；您可以使用代码生成从其单独的组件编译 JavaScript 文件(见下文)。

演示: http://jsfiddle.net/PgdXd/

CSS

将整个样式表放在一个字符串文字中(不要忘记转义引号和换行符)并将其嵌入动态创建 style 的 JavaScript 语句中元素。

$('head').append("<style> ......... </style>");

注意:我在这里使用的是 jQuery，但纯 JavaScript 也可以。

上述声明在旧版网络浏览器中可能无效。有关替代方案，请参阅:How to dynamically create CSS class in JavaScript and apply?

字体

将您的 Base64 编码字体文件嵌入您的样式表中，如下所述:http://sosweetcreative.com/2613/font-face-and-base64-data-uri

@font-face {
    font-family: 'latoregular';
    src: url(data:application/x-font-woff;charset=utf-8;base64,........) format('woff');
    font-weight: normal;
    font-style: normal;
}

如前所示，这应该嵌入到保存样式表的 JavaScript 语句中:

$('head').append("<style> @font-face { font-family:'latoregular'; src: url(data:application/x-font-woff;charset=utf-8;base64,........) format('woff'); font-weight:normal; font-style:normal; } .... </style>");

图片

有两种口味。可以在样式表中指定背景图像，就像我们对字体所做的那样:

.logo1 { background-image: url(data:image/png;base64,.......); }

第二种是常规图像。在 HTML 文件中，使用 img带有空 src 的标签属性。

<img alt="" src="" class="icon1" />

使用 javascript 填充 src属性。整个 Base64 字符串是嵌入在 JavaScript 语句中的字符串文字。

$('.icon1').attr('src', 'data:image/png;base64,.......');
$('.icon2').attr('src', 'data:image/png;base64,.......');

CSS 类决定哪些数据属于哪个 img标签。在将包含此 JavaScript 文件的一个或多个 HTML 页面中未使用某个类是可以的。 Base64 字符串只是传递了一点；其他基于 JavaScript 的方法也涉及同样微不足道的开销。

代码生成

这是一个使用 bash 脚本的简单示例。但请随意使用 Perl 或 T4 或您喜欢的任何语言或工具。

gendatauri.sh:输出数据URI；参数是文件名和(可选)MIME 类型。

#!/bin/bash
echo "data:${2:-$(file -bi $1)};base64,$(base64 -w0 $1)"

genimgsrc.sh:生成 jQuery 语句来填充 src <img> 的属性要素；参数为文件名。

#!/bin/bash
filename=$1
basename=${filename##*/}
classname=${basename%.*}
echo "\$('.$classname').attr('src','$(./gendatauri.sh $filename)');"

gencss.sh:你的样式表；使用 $(./gendatauri.sh FILENAME [MIMETYPE])注入(inject)文件数据。示例:

#!/bin/bash
cat << EOF
@font-face {
    font-family: 'latoregular';
    src: url($(./gendatauri.sh latoregular.woff "application/x-font-woff;charset=utf-8")) format('woff');
    font-weight: normal;
    font-style: normal;
}
.logo1 {
    background-image: url($(./gendatauri.sh icon1.png));
}
EOF

genjs.sh:将所有不同的组件组合到一个 JavaScript 文件中。示例:

#!/bin/bash

# CSS, including fonts and background images
(
    echo '$("head").append("<style>\n'
    ./gencss.sh
    echo '\n</style>");'
) | tr '\n' ' '
echo

# images
./genimgsrc.sh icon1.png
./genimgsrc.sh icon2.png

# JavaScript
cat YourOwnFunctions.js

运行它并重定向其输出以生成最终的 JavaScript 文件。确保 .png , .woff当您这样做时，其他资源文件会出现。

./genjs.sh > GeneratedJavaScriptFile.js

在每个 HTML 文件中包含 JavaScript 文件:

<script src="GeneratedJavaScriptFile.js"></script>

为清楚起见:在网络服务器上，您只需要 GeneratedJavaScriptFile.js和 .html文件；原始资源文件不需要出现在那里。