Html2canvas игнорирует -webkit-mask-image
Я делаю веб-редактор звездных карт, и для придания формы карты я использую это свойство СSS -webkit-mask-image. После этого мне нужно карту сохранить как картинку (png или jpeg пока не важно). Для этого я использую html2canvas. Но вот проблема, при сохранении картинки -webkit-mask-image не применяется (т.к. он не поддерживается этой библиотекой) и я получаю просто черный квадрат. Кто знает как можно решить эту проблему? В моем случае для меня главное сохранить HTML код картинкой и чтобы все элементы отображались как нужно.
JS:
function downloadimage() {
let container = $("starmap_photo");
html2canvas(container, {allowTaint: false}).then(function (canvas) {
let link = document.createElement("a");
document.body.appendChild(link);
link.download = "image.png";
link.href = canvas.toDataURL();
link.target = '_blank';
link.click();
})}
HTML:
<div id="starmap_photo">
<div id="map">
<div class="starmap_element" id="starmap_stroke"></div>
<div class="starmap_element" id="starmap"></div>
<div class="starmap_element" id="starmap_background"></div>
<div class="starmap_element" id="edging"></div>
</div>
<div spellcheck="false" class="text_map disable_selection" id="main_text">Ваша фраза</div>
<div spellcheck="false" class="text_map disable_selection" id="place_text">Ваше место</div>
<div class="hidden" id="frame"></div>
</div>