HtmlToCanvas занимает много времени, даже если размер холста меньше - PullRequest
Новая
       10

HtmlToCanvas занимает много времени, даже если размер холста меньше

0 голосов
/ 26 марта 2019

Я использую библиотеку HtmlToCanvas js, чтобы получить весь текст шрифта длиной 100 разного типа с размером шрифта "25px".

Теперь уже есть много других тегов 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

занимает слишком много времени. Я ссылался на эту ссылку

Также ссылался на эту ссылку secondlink - что опять-таки не плодотворно, но рассматривает весь большой html-контент, тогда как здесь есть только определенный html, который я выбираю для преобразования из html в canvas.Остальная часть javascript & html не используется в этом контексте.

Спасибо.

...