带有 html2canvas 的 Mozilla Firefox 中的 Fontawesome 图标显示问题
fontawesome icon display issue in mozila firefox with html2canvas
我显示字体很棒 css 在我的问题中显示图标是图标可以完美显示,但我正在使用 html2cnvas js 将 div 转换为图像。 js 可以将 div 转换为完美图像,但我的问题是当它转换为图像字体时,真棒图标无法显示,而不是图标,它显示矩形符号。请帮助查找错误。我的代码写在下面。
div 转换为图片
HTML
<div id='parent_poster'>
<span class="boxfitted">
<i class="fa fa-apple change-color"></i>
</span>
</div>
CSS
#author{
margin-top: -85px;
margin-right: 10px;
text-align: left;
font-weight: 600;
overflow: hidden;
text-align: right;
float: right;
}
#watermark{
display: block;
position: static;
margin: -102px 0px 13px 0px;
font-size: 30px;
font-family: 'Monopol';
}
#watermark p{
opacity: 0.1;
}
JQuery
html2canvas javascript 转换图片
$("#generate_quote").on('click', function() {
$(".watermark").show();
html2canvas($("#parent_poster"), {onrendered: function(canvas) {
$(".watermark").hide();
var myImage = canvas.toDataURL("image/jpeg");
window.open(myImage);
}});
});
似乎是旧版 html2canvas 的问题。您可以在此处查看问题 (https://github.com/niklasvh/html2canvas/issues/314)。
您可以下载5.0版本再试运行。或者,如果您不想更改它,您可以在提交后更改您的版本的 html2canvas 中的代码。 https://github.com/kabushi/html2canvas/commit/0744de82b68a1922315f076e244a586445e5636b
我显示字体很棒 css 在我的问题中显示图标是图标可以完美显示,但我正在使用 html2cnvas js 将 div 转换为图像。 js 可以将 div 转换为完美图像,但我的问题是当它转换为图像字体时,真棒图标无法显示,而不是图标,它显示矩形符号。请帮助查找错误。我的代码写在下面。
div 转换为图片
HTML
<div id='parent_poster'>
<span class="boxfitted">
<i class="fa fa-apple change-color"></i>
</span>
</div>
CSS
#author{
margin-top: -85px;
margin-right: 10px;
text-align: left;
font-weight: 600;
overflow: hidden;
text-align: right;
float: right;
}
#watermark{
display: block;
position: static;
margin: -102px 0px 13px 0px;
font-size: 30px;
font-family: 'Monopol';
}
#watermark p{
opacity: 0.1;
}
JQuery
html2canvas javascript 转换图片
$("#generate_quote").on('click', function() {
$(".watermark").show();
html2canvas($("#parent_poster"), {onrendered: function(canvas) {
$(".watermark").hide();
var myImage = canvas.toDataURL("image/jpeg");
window.open(myImage);
}});
});
似乎是旧版 html2canvas 的问题。您可以在此处查看问题 (https://github.com/niklasvh/html2canvas/issues/314)。
您可以下载5.0版本再试运行。或者,如果您不想更改它,您可以在提交后更改您的版本的 html2canvas 中的代码。 https://github.com/kabushi/html2canvas/commit/0744de82b68a1922315f076e244a586445e5636b