我正在使用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。
谢谢。