Javascript 如何在Holder.js图像中使用引导图标

我正在用Bootstrap构建一个项目的前端，我希望使用3.0.0中的内容，而不是通常的文本。我该怎么做

熟悉JS的人都知道，JS基本上是在客户端创建占位符图像。这有一些有用的节省带宽的应用程序，因为您只需要下载脚本的重量（约4Kb），然后让客户机生成图像

我想将Glyphicons与holder.js结合起来，动态生成高质量的大图标

使用引导调用Glyphicon非常简单，如下所示：

<span class="glyphicon glyphicon-user"></span>

<img data-src="holder.js/200x200/text:Hello World">

<img src="data:image/png;base64," data-src="holder.js/140x140/text:&#xe093;/blueGlyph">

---

如何轻松地将特定的字形图标字符以正确的字体传递到holder.js，以输出图像图标？

好的，因此这并没有引起任何人的兴趣。但我自己解决了这个问题，认为与社区分享我的解决方案是一种很好的礼节

我必须做两件事。在我意识到holder.js将JavaScript画布绘图解析为png图像文件后，问题不再是“holder.js”问题，而是纯粹的js和web字体/字体脸问题

第一件事：我必须明确告诉系统，字形图标是字体，我指的是什么。我通过以下CSS实现了这一点：

@font-face {
            font-family: 'Glyphicons Halflings';
            font-style: normal;
            font-weight: normal;
            src: local('Glyphicons Halflings'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype');
        }

第二：一旦浏览器知道我使用的字体的名称、位置和类型，我就可以开始使用它将unicode字符传递给JS画布对象。Holder.js有一个设置变量，它保存一个“主题”数组，我在数组中添加了以下自定义主题：

"blueGlyph": {
        background: "#3a87ad",
        foreground: "#ffffff",
        size: 128,
        font:"Glyphicons Halflings"
    }

第三：现在我所要做的就是将unicode字符传递给JS脚本，它将动态生成图标图像。HTML如下所示：

<span class="glyphicon glyphicon-user"></span>

<img data-src="holder.js/200x200/text:Hello World">

<img src="data:image/png;base64," data-src="holder.js/140x140/text:&#xe093;/blueGlyph">

它生成了以下动态生成的图像：

选择并以正确格式传递unicode字符以便进行解释和绘制的关键是使用HTML方法传递unicode字符。ie&#x*{UNICODE HERE}*。或根据上述示例的“；”

---

我一直在网上搜索，但没有找到任何解决方案。正如imsky所说，这是一个“矩形”（缺少字符）。因此，我尝试创建自己的解决方案，但这不是使用holder.js创建图像

<div class="col-xs-6 col-md-3">
   <a href="#" class="thumbnail">
       <span class="big-icon glyphicon glyphicon-glass"></span>
   </a>
</div>

然后是css样式：

<style>
.big-icon{
   margin:10px;
   font-size:100px;
}
.thumbnail{
   text-align:center;
}
</style>

.大图标{
利润率：10px；
字体大小：100px；
}
.缩略图{
文本对齐：居中；
}

结果如下：

但我仍然在寻找解决方案：如何在Holder.js图像中使用引导图标。任何帮助都将不胜感激

---

谢谢

但既然已经有了解决方案，为什么您会如此困惑呢。 只需删除所有与holder.js相关的更改，然后回到基础，将这些行放在文档末尾，然后查看更改

 $(function() {
        $('img').each(function() {
            var img = $(this);
            img.error(function() {
                img.replaceWith('<span class="glyphicon glyphicon-user" style=" background-color: #eee;  font-size: 100pt"></span>');
            });
        });
    });

$（函数（）{
$（'img'）。每个（函数（）{
var img=$（本）；
img.error（函数（）{
img.替换为（“”）；
});
});
});

---

如果需要更多帮助，可以发邮件给我ranjeet1985@gmail.com

这太棒了，我会考虑让它成为Holder的默认部分。@imsky先生本人很荣幸。我很高兴你喜欢它。我希望在一些图像上对图像进行抗锯齿处理，在角色的边缘有一些非常明显的像素化。对于我来说，这是一个“矩形”（缺少字符），我想你需要自己在某个地方主持这个例子。@Samyoul，这个解决方案不起作用。您能给我们提供另一个有效的示例吗？Holder的SVG渲染器需要额外的工作来显示webfonts。2.4版本将完全支持webfont，请参阅本期：