带有 html2canvas 的 Mozilla Firefox 中的 Fontawesome 图标显示问题

Question

我显示字体很棒 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);
        }});
 });

Answer 1

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

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

带有 html2canvas 的 Mozilla Firefox 中的 Fontawesome 图标显示问题

fontawesome icon display issue in mozila firefox with html2canvas

javascript

html

css

font-awesome

html2canvas