在一个多文件的base64 [英] Multiple base64 files in one
问题描述
你能在这个JS小提琴并链接到他们的图片？
像
的东西 ＆LT; IMG SRC =＃base64.html IMG1/＆GT;
＆所述; IMG SRC =base64.html＃IMG2/＆GT;
我没有看到这个答案，但它没有提供范例结果
<一href=\"http://stackoverflow.com/questions/3459550/can-multiple-base64-documents-be-stored-in-a-single-file\">Can多的base64文件被保存在一个文件中？
有关文件名使用点并以某种方式使文件有什么认为这是一个不同的文件名，如 base64.img1.html 并以某种方式使用文件头分裂他们，所以它的一个文件，但不同的部分。
好了，新的想法..如果有指定的方式是什么 charStart 和 charEnd ？试想一下，有2的base64 EN codeD文件，然后你调用一个像
base64.0-3214.html //为一个文件（如font.woff）
base64.3215-5673.html //其他文件（如demo.jpg）
有可能把所有的资源（的JavaScript，CSS，字体，图像）在一起的一个大（高速缓存）JavaScript文件。该文件将显得凌乱（因为有些冗长的CSS和Base64编码字符串），但不要让这把你赶走;你可以用code一代从其单独的组件编译JavaScript文件（见下文）。
的演示：的 http://jsfiddle.net/PgdXd/
CSS
把你的整个样式表在一个字符串（不要忘记转义引号和换行符），并嵌入动态创建一个风格元素中的JavaScript语句中。
$（'头'）追加（＆LT;风格＆GT; .........＆LT; /风格与GT;）;
请注意：我使用jQuery在这里，但普通的JavaScript会做的一样好
上面的语句，可能有旧版的浏览器版本没有影响。替代方案，请参见：<一href=\"http://stackoverflow.com/questions/1720320/how-to-dynamically-create-css-class-in-javascript-and-apply\">How在JavaScript中动态创建CSS类和应用？
字体
嵌入您的Base64恩codeD字体文件的样式表中，按如下说明：的 http://sosweetcreative.com/2613/font-face-and-base64-data-uri
@字体面{
FONT-FAMILY：'latoregular';
SRC：URL（数据：应用程序/ x-字体WOFF;字符集= UTF-8; BASE64，........）格式（'WOFF'）;
字体重量：正常;
字体风格：正常;
}
如前所示，这应该是嵌入保存你的样式表中的JavaScript语句中：
$（'头'）追加（＆LT;风格＆GT; @字体面{FONT-FAMILY：'latoregular'; SRC：URL（数据：应用程序/ x-字体-woff;字符集= UTF-8; BASE64，........）格式（'WOFF'）;字体重量：正常;字体风格：正常;} ....＆LT; /风格与GT; ）;
图片
有两种口味。背景图像可以在样式表中指定，就像我们用的字体：
.logo1 {背景图像：网址（数据：图像/ PNG; BASE64，.......）; }
第二香味都是正规的图像。在HTML文件中，使用 IMG 标签和一个空的src 属性。
＆LT; IMG ALT =SRC =级=ICON1/＆GT;
使用JavaScript来填充的src 属性。整个的Base64字符串是嵌入的JavaScript语句中的文字字符串。
$（'ICON1。'）ATTR（SRC，数据：图像/ PNG; BASE64，......'）。
$（'。图标2'）ATTR（'的src'，'数据：图像/ PNG;的base64，.......'）;。
在CSS类确定哪些数据属于哪个 IMG 标记（S）。它是好的一定类是在一个或多个HTML网页将要包括这个JavaScript文件未使用。基于64位字符串只是获取张望了一下过去了;同样可以忽略不计的开销是参与其他基于JavaScript的方法。
code代
下面是使用的bash脚本一个简单的例子。但随意使用Perl或T4或任何语言或工具，你喜欢的吧。
gendatauri.sh：输出数据URI;参数是文件名（可选）MIME类型。
＃！/斌/庆典
回声的数据：$ {2： - $（文件-bi $ 1）};的base64，$（BASE64 -w0 $ 1）
genimgsrc.sh：生成jQuery的语句来填充的的src 属性＆LT; IMG＆GT; 元素;参数是文件名。
＃！/斌/庆典
文件名= $ 1
基名= $ {文件名## * /}
类名= $ {基本名称％。*}
回声\\ $（'$类名。'）ATTR（'src'中，'$（./ gendatauri.sh $文件名）'）;。
gencss.sh：你的样式表;使用 $（./ gendatauri.sh文件名[MIMETYPE]）注入文件数据。例如：
＃！/斌/庆典
猫＆LT;＆LT; EOF
@字体面{
FONT-FAMILY：'latoregular';
SRC：URL（$（./ gendatauri.sh latoregular.woff应用程序/ x-字体WOFF;字符集= UTF-8））格式（'WOFF'）;
字体重量：正常;
字体风格：正常;
}
.logo1 {
背景图像：网址（$（./ gendatauri.sh icon1.png））;
}
EOF
genjs.sh：结合了所有不同的部件成一个单一的JavaScript文件。例如：
＃！/斌/庆典＃CSS，包括字体和背景图片
（
回声$（头）追加（＆LT;花柱＆GT; \\ N'
./gencss.sh
呼应的'\\ n＆LT; /风格与GT;）;
）| TR的'\\ n'''
回声＃ 图片
./genimgsrc.sh icon1.png
./genimgsrc.sh icon2.png＃的JavaScript
猫YourOwnFunctions.js
运行它和重定向其输出，以产生最终的JavaScript文件。确保巴纽， .woff 和其他资源文件，当你做present。
./ genjs.sh＆GT; GeneratedJavaScriptFile.js
包含在每个HTML文件中的JavaScript文件：
＆LT;脚本SRC =GeneratedJavaScriptFile.js＆GT;＆LT; / SCRIPT＆GT;
仅仅是为了清楚：在Web服务器上，你只需要 GeneratedJavaScriptFile.js 和的.html 文件;原始资源文件不需要被有present
Can you combine these 2 images into one external file on this JS fiddle and link to them as images?
Something like
<img src="base64.html#img1" />
<img src="base64.html#img2" />
I did see this answer, but it provides no examples
Can multiple base64 documents be stored in a single file?
What about using a dot in the filename and somehow making the file think that it's a different filename, like base64.img1.html and somehow using a file-header to split them so its one file but different parts.
Okay, new idea .. what if there was a way to specify the charStart and charEnd? Imagine there were 2 base64 encoded files and then you call one like
base64.0-3214.html // for one file (like font.woff)
base64.3215-5673.html // for another file (like demo.jpg)
It is possible to put all resources (JavaScript, CSS, fonts, images) together in one big (cacheable) JavaScript file. The file will look messy (because of some lengthy CSS and Base64 strings), but don't let that put you off; you can use code generation to compile the JavaScript file from its separate components (see below).
Demo: http://jsfiddle.net/PgdXd/
CSS
Put your entire stylesheet in a single string literal (do not forget to escape quotes and line breaks) and embed that inside a JavaScript statement that dynamically creates a style element.
$('head').append("<style> ......... </style>");
Note: I am using jQuery here, but plain JavaScript will do just as well.
The statement above may have no effect in older web browser versions. For alternatives, see: How to dynamically create CSS class in JavaScript and apply?
Fonts
Embed your Base64-encoded font files inside your stylesheet, as explained here: 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;
}
As shown earlier, this should be embedded within the JavaScript statement that holds your stylesheet:
$('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>");
Images
There are two flavors. Background images can be specified in the stylesheet, just like we did with fonts:
.logo1 { background-image: url(data:image/png;base64,.......); }
The second flavor are regular images. In the HTML file, use img tags with an empty src attribute.
<img alt="" src="" class="icon1" />
Use javascript to populate the src attribute. The entire Base64 string is a string literal embedded inside the JavaScript statement.
$('.icon1').attr('src', 'data:image/png;base64,.......');
$('.icon2').attr('src', 'data:image/png;base64,.......');
The CSS class determines which data belongs in which img tag(s). It is alright for a certain class to be unused in one or more HTML pages that will be including this JavaScript file. The Base64 string just gets passed around a bit; the same negligible overhead is involved in other JavaScript-based approaches.
Code generation
Here's a simple example using bash scripts. But feel free to use Perl or T4 or whatever language or tool you like instead.
gendatauri.sh: outputs a data URI; parameters are filename and (optionally) MIME type.
#!/bin/bash
echo "data:${2:-$(file -bi $1)};base64,$(base64 -w0 $1)"
genimgsrc.sh: generates the jQuery statement to populate the src attribute of <img> elements; parameter is filename.
#!/bin/bash
filename=$1
basename=${filename##*/}
classname=${basename%.*}
echo "\$('.$classname').attr('src','$(./gendatauri.sh $filename)');"
gencss.sh: your stylesheet; use $(./gendatauri.sh FILENAME [MIMETYPE]) to inject file data. Example:
#!/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: combines all the different components into a single JavaScript file. Example:
#!/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
Run it and redirect its output to generate the final JavaScript file. Make sure the .png, .woff and other resource files are present when you do.
./genjs.sh > GeneratedJavaScriptFile.js
Included the JavaScript file in each HTML file:
<script src="GeneratedJavaScriptFile.js"></script>
Just for clarity: on the web server, you only need GeneratedJavaScriptFile.js and the .html files; the original resource files do not need to be present there.
这篇关于在一个多文件的base64的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
