javascript - 使用 css 和 javascript 动态生成图像

Question

我在 twitter bootstrap 的轮播示例中看到 container marketing img 和 featurette img 是动态生成的。

我是 css、javascript 和 twitter bootstrap 的新手，有人可以解释一下吗？我很想知道它是如何完成的，以便我可以更改它以生成我自己的图像，谢谢!

这是 javascript(我想是的.. 它在 holder.js 中):

var settings = {
    domain: "holder.js",
    images: "img",
    bgnodes: ".holderjs",
    themes: {
        "gray": {
            background: "#eee",
            foreground: "#aaa",
            size: 12
        },
        "social": {
            background: "#3a5a97",
            foreground: "#fff",
            size: 12
        },
        "industrial": {
            background: "#434A52",
            foreground: "#C2F200",
            size: 12
        }
    },
    stylesheet: ".holderjs-fluid {font-size:16px;font-weight:bold;text-align:center;font-family:sans-serif;margin:0}"
};

这是html部分:

  <div class="featurette">
    <img class="featurette-image img-circle pull-right" data-src="holder.js/512x512">
    <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
    <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
  </div>

当查看图片时，它的地址看起来是这样的:

data:image/png;base64,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gEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAv0PnVh7b3swf+IAAAAASUVORK5CYII=

编辑:

谢谢大家的解答!!这是由于您的所有回答使我弄清楚图像是从主题生成的:{ ... } in var settings

Answer 1

你正在处理图像数据 URI，它们基本上只是文本格式的图像，它们不依赖于 CSS 或 JavaScript；它实际上只是以字符格式编码的图像数据。

您可以使用各种在线工具生成它们，例如 image to data uri convertor .

使用它们的好处是可以将非常小的图像内嵌到 HTML 中，从而避免浏览器发出无关的 HTTP 请求，如果您的 HTML 缓存良好，这也是一个令人头疼的解决方案。请记住，它们也有缺点:例如，它们对于大图像来说效率很低。