Проблемы с Html2Canvas при загрузке и отображении изображений - PullRequest
Новая
       6

Проблемы с Html2Canvas при загрузке и отображении изображений

0 голосов
/ 02 ноября 2018

Я новичок. Ниже я написал код для добавления текста с использованием CSS в середине изображения.

Я хочу сохранить это изображение с текстом. Для этого я использую html2canvas .

Иногда работает отлично (легко загружать с изображениями).

Но теперь возникают 2 проблемы:

  1. Показывает мне ошибку

    загрузка (Сбой - Ошибка сети)

  2. Скачать без изображения (Только текст, написанный в середине пробела изображение) 


<script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.svg.min.js'></script>
<style>
.container {
    position: relative;
    text-align: center;
    color: red;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size:100px;
    opacity: 0.3;
    transform: translate(-50%, -50%);
}
</style>
<script>
function generateScreenshot()
{
    html2canvas(document.getElementById('div_1'),
    {
        logging: true,
        profile: true,
        useCORS: true
    }).then(function (canvas)
    {
        var a=$("<a>").attr("href",canvas.toDataURL('image/png')).attr("download","Merit.png").appendTo("body");
        a[0].click();
        a.remove();
    });
}
</script>

<button onclick="javascript:generateScreenshot()">Convert to JPEG</button>

<div class="container" id="div_1" style="">
    <img src="https://i.imgur.com/UrvMDvN.jpg" alt="Snow" style="width:100%;" />
    <div class="centered">Example.Com</div>
</div>
...