6

我正在尝试创建一个可以通过电子邮件发送给包含运行它所需的所有标记、js、css 和图像的人的单个文件 HTML5 文档。

我知道描述离线过程的文章，例如http://diveintohtml5.info/offline.html，但是想知道嵌入其资源（例如大图像和 js 文件）的最佳方法。

我会为这些使用base64编码还是有更好的方法？

应用程序将在相当新的浏览器上运行。

4

3 回答 3

5

是的，base64 对图像进行编码。我所做的是在转换为 base64 之前将它们保存为 png 并保存为正确的大小（有免费的在线网站可以为你做这件事）。这样可以节省很多空间。

要将数据保存到本地文件，请使用 HTML5 本地存储，这里有一个指南：http ://www.html5rocks.com/en/features/storage 。

对于 JS/CSS 文件，只需将它们粘贴在头部，没什么大不了的！

于 2013-09-28T15:05:58.347 回答
1

为了一些工作，我不得不相当积极地这样做。

为了显着减小文件大小，如果图形是线条艺术而不是照片，我更喜欢将其转换为可缩放的矢量图形文件（.svg）。这些是当今大多数浏览器自己理解的文本文件，并且很容易直接嵌入到 HTML 文件中。根据您的操作方式，您有几个选项，从直接使用带有命令的标签来驱动它，或者将其作为样式表组件嵌入到文档正文中您需要它的任何地方，使用数据 URI（例如.my_image{background:url(data:image/svg+xml;charset=UTF-8,[SVG file without newlines]);}，在此处找到更详细的信息：https ://css-tricks.com/using-svg/）。确保您在所有您希望它使用的浏览器上进行测试......我已经能够在 IE、Chrome、Firefox 和 Edge 上成功地做到这一点，尽管我必须使用 charset=US-ASCII 并应用一些过滤SVG 文本使其工作。

对于字体，我使用 Font Squirrel 从我上传的字体文件生成 webkit（使用高级选项，并将 stylesheet.css 设置为将字体嵌入其中，这样您就可以将生成的文本复制到自己的页面中）。

如前所述，可以简单地将外部样式表和 JavaScript 直接复制到您的 HTML 中。

于 2019-01-08T14:34:07.390 回答
-1

很老的问题，但对于其他人来说，这是完美的应用程序/扩展： https ://chrome.google.com/webstore/detail/singlefile/mpiodijhokgodhhofbcjdecpffjipkle

此外，您可以使用任何浏览器用户代理字符串更改器来加载页面的移动版本，然后将其保存到单个 html 文件（包含所有图像媒体 css 里面的所有内容），它在智能手机上很好地显示，您只需要发送一个文件.

如果您想从 PDF 而不是网页创建，则可以使用www.zamzar.com或此类在线转换器并选择 1-page HTML5 选项。

于 2021-02-19T15:20:28.913 回答