即使画布大小较小,HtmlToCanvas也会花费很长时间

时间:2019-03-26 12:50:31

标签: javascript canvas html2canvas

我正在使用HtmlToCanvas js库获取字体大小为“ 25px”的不同类型字体的所有长度为100的文本。

现在页面周围已经有许多其他html标签,但是已获取的元素具有特定字体系列的长度为100的长文本,字体大小为“ 25px”

但是从Html2Canvas js获取画布大约需要30秒

我没有添加较长的html标签,而是添加了一些特定标签,这些标签是我尝试从中获取的

function saveSignatureFromText() {
      var element = $('.rbtn-font:checked')[0].labels[0].children[1];
    html2canvas(element, {
        onrendered: function (canvas) {
            $("#CurrentCanvas").append(canvas);
    }
    });
}
  <link href="https://fonts.googleapis.com/css?family=Caveat|Damion|Gaegu|Gochi+Hand|Homemade+Apple|Kristi|Marck+Script|Mr+De+Haviland|Nothing+You+Could+Do|Reenie+Beanie|Rock+Salt|Shadows+Into+Light+Two|Zeyada" rel="stylesheet">

<style>
    .font-Caveat {
        font-family: 'Caveat', cursive;
        font-size: 25px;
    }

    .font-Damion {
        font-family: 'Damion', cursive;
        font-size: 25px;
    }

    .font-Gaegu {
        font-family: 'Gaegu', cursive;
        font-size: 25px;
    }

    .font-Gochi-Hand {
        font-family: 'Gochi Hand', cursive;
        font-size: 25px;
    }

    .font-Homemade-Apple {
        font-family: 'Homemade Apple', cursive;
        font-size: 25px;
    }

    .font-Kristi {
        font-family: 'Kristi', cursive;
        font-size: 25px;
    }

    .font-Marck-Script {
        font-family: 'Marck Script', cursive;
        font-size: 25px;
    }

    .font-Mr-De-Haviland {
        font-family: 'Mr De Haviland', cursive;
        font-size: 25px;
    }

    .font-Nothing-You-Could-Do {
        font-family: 'Nothing You Could Do', cursive;
        font-size: 25px;
    }

    .font-Reenie-Beanie {
        font-family: 'Reenie Beanie', cursive;
        font-size: 25px;
    }

    .font-Shadows-Into-Light-Two {
        font-family: 'Shadows Into Light Two', cursive;
        font-size: 25px;
    }

    .font-Zeyada {
        font-family: 'Zeyada', cursive;
        font-size: 25px;
    }
</style>
  <div id="divlistofFonts" class="font-style-list-wrap">
                                    <ul class="text-left custom-radio-group">
                                        <li>
                                            <label class="control custom-radio">
                                                <input class="rbtn-font" type="radio" data-font="Caveat" name="group2"><span class="sign-p font-Caveat">cygnaturethousandonetest testi khuman Hello World Hello nAeri</span>
                                                <span class="control-indicator"></span>
                                            </label>
                                        </li>
                                        <li>
                                            <label class="control custom-radio">
                                                <input class="rbtn-font" type="radio" data-font="Damion" name="group2"><span class="sign-p font-Damion">cygnaturethousandonetest testi khuman Hello World Hello nAeri</span>
                                                <span class="control-indicator"></span>
                                            </label>
                                        </li>
                                        <li>
                                            <label class="control custom-radio">
                                                <input class="rbtn-font" type="radio" data-font="Gaegu" name="group2"><span class="sign-p font-Gaegu">cygnaturethousandonetest testi khuman Hello World Hello nAeri</span>
                                                <span class="control-indicator"></span>
                                            </label>
                                        </li>
                                        <li>
                                            <label class="control custom-radio">
                                                <input class="rbtn-font" type="radio" data-font="Gochi Hand" name="group2"><span class="sign-p font-Gochi-Hand">cygnaturethousandonetest testi khuman Hello World Hello nAeri</span>
                                                <span class="control-indicator"></span>
                                            </label>
                                        </li>
                                        <li>
                                            <label class="control custom-radio">
                                                <input class="rbtn-font" type="radio" data-font="Homemade Apple" name="group2"><span class="sign-p font-Homemade-Apple">cygnaturethousandonetest testi khuman Hello World Hello nAeri</span>
                                                <span class="control-indicator"></span>
                                            </label>
                                        </li>
                                        <li>
                                            <label class="control custom-radio">
                                                <input class="rbtn-font" type="radio" data-font="Kristi" name="group2"><span class="sign-p font-Kristi">cygnaturethousandonetest testi khuman Hello World Hello nAeri</span>
                                                <span class="control-indicator"></span>
                                            </label>
                                        </li>
                                        <li>
                                            <label class="control custom-radio">
                                                <input class="rbtn-font" type="radio" data-font="Marck Script" name="group2"><span class="sign-p font-Marck-Script">cygnaturethousandonetest testi khuman Hello World Hello nAeri</span>
                                                <span class="control-indicator"></span>
                                            </label>
                                        </li>
                                        <li>
                                            <label class="control custom-radio">
                                                <input class="rbtn-font" type="radio" data-font="Mr De Haviland" name="group2"><span class="sign-p font-Mr-De-Haviland">cygnaturethousandonetest testi khuman Hello World Hello nAeri</span>
                                                <span class="control-indicator"></span>
                                            </label>
                                        </li>
                                        <li>
                                            <label class="control custom-radio">
                                                <input class="rbtn-font" type="radio" data-font="Nothing You Could Do" name="group2"><span class="sign-p font-Nothing-You-Could-Do">cygnaturethousandonetest testi khuman Hello World Hello nAeri</span>
                                                <span class="control-indicator"></span>
                                            </label>
                                        </li>
                                        <li>
                                            <label class="control custom-radio">
                                                <input class="rbtn-font" type="radio" data-font="Reenie Beanie" name="group2"><span class="sign-p font-Reenie-Beanie">cygnaturethousandonetest testi khuman Hello World Hello nAeri</span>
                                                <span class="control-indicator"></span>
                                            </label>
                                        </li>
                                        <li>
                                            <label class="control custom-radio">
                                                <input class="rbtn-font" type="radio" data-font="Shadows Into Light Two" name="group2"><span class="sign-p font-Shadows-Into-Light-Two">cygnaturethousandonetest testi khuman Hello World Hello nAeri</span>
                                                <span class="control-indicator"></span>
                                            </label>
                                        </li>
                                        <li>
                                            <label class="control custom-radio">
                                                <input class="rbtn-font" type="radio" data-font="Zeyada" name="group2"><span class="sign-p font-Zeyada">cygnaturethousandonetest testi khuman Hello World Hello nAeri</span>
                                                <span class="control-indicator"></span>
                                            </label>
                                        </li>
                                    </ul>
                                </div>
                                <div class="d-sm-flex justify-content-between">

                                    <div class="text-sm-left text-center">
                                        <button type="button" class="btn-dark-blue" id="btnSignDone" onclick="saveSignatureFromText();">Done</button>
                                    </div>

                                </div>
                                <div id="CurrentCanvas"></div>

选择一个单选按钮时,将使用特定字体系列的特定范围来创建文本长度小于100的画布。

由于此页中还有其他html元素以及上述代码,因此使用html2canvas创建画布花费的时间太长了

我提到了这个link

也提到了此secondlink-再次没有结果 但它正在考虑整个大型html内容,而这里只是我要提取的特定html,以将其从html转换为画布。在这种情况下,不使用其余的javascript和html。

谢谢。

0 个答案:

没有答案