Question

我显示字体真棒css在我的问题中显示图标是该图标可以显示完美但我使用html2cnvas js将该div转换为图像。 js可以将div转换成图像完美但我的问题是当它转换为图像字体真棒图标不能显示而不是图标它显示矩形标志。请帮忙找bug。我的代码写在下面。

转换为图像的

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);
        }});
 });

Answer 1

似乎是旧版html2canvas版本的问题。您可以在此处查看问题（https://github.com/niklasvh/html2canvas/issues/314）。

您可以下载5.0版本并尝试再次运行它。或者，如果您不想更改它，您可以在此提交后更改您的版本的html2canvas中的代码。 https://github.com/kabushi/html2canvas/commit/0744de82b68a1922315f076e244a586445e5636b

使用html2canvas在mozila firefox中显示fontawesome图标问题

1 个答案: