html2canvas 1.0.0-r c .5 2019 не работает с закругленными углами / границей радиуса (изображение всегда прямоугольное angular)? - PullRequest
Новая
       31

html2canvas 1.0.0-r c .5 2019 не работает с закругленными углами / границей радиуса (изображение всегда прямоугольное angular)?

0 голосов
/ 18 февраля 2020

Я долго использовал версию html2canvas 2016 (0.5.0), потому что она всегда работала так, как мне было нужно. Теперь мне нужно перейти на текущую версию, но у меня есть некоторые проблемы:

Созданное изображение больше не имеет закругленных углов. Png всегда прямоугольный angular. И теперь я спрашиваю себя, делаю ли я что-то не так, или это может быть ошибка в текущей версии html2canvas? Сначала я хотел спросить здесь, прежде чем публиковать это как «проблему» на GitHub.

Результат с версией 2016 0.5.5 : https://i.imgur.com/gxutBEY.png (округлено углы)
Результат с 2019 1.0.0 версия: https://i.imgur.com/LLY9WpI.png (прямоугольник angular углы)

Вот JSFiddle, который показывает проблему : https://jsfiddle.net/ROPfiddle/jskLuw3v/3/

Это текущая версия (1.0.0-r c .5) html2canvas: https://html2canvas.hertzen.com/dist/html2canvas.js

Это мое CSS: 

body {
  font-family: system-ui, Helvetica, Arial, sans-serif;
  margin: 19px 20px 0 20px;
  background-color: #000;
}
#wrapper {
  position: absolute;
  white-space: nowrap;
}
#badge {
  padding: 70px 67px 63px 71px;
  border: 13px solid #a6a6a6;
  border-radius: 110px;
  line-height: 1;
  background-color: #000;
  color: #fff;
}
.icon img {
  width: 273px;
  height: auto;
  border-radius: 62px;
}
.icon {
  float: left;
}
.typo {
  margin-top: -3px;
  margin-left: 336px;
}
.text {
  font-size: 92px;
  font-weight: 500;
  color: #a6a6a6;
  letter-spacing: 0.04em;
}
.name {
  font-size: 191px;
  font-weight: 700;
  margin-left: -6px;
  letter-spacing: -0.0125em;
}
.finalbadge {
  width: 100%;     
  height: auto;   
}

Это мое HTML (без закодированного изображения base64): 

<div id="wrapper">
  <div id="badge">
    <div class="icon">
      <img src="data:image/png;base64, "/>
    </div>
    <div class="typo">
      <span class="text">Listen on</span><br />
      <span class="name">iTunes</span>
    </div>
  </div>
</div>

А это мой JS: 

html2canvas(document.getElementById("badge")).then(function(canvas) {
    document.body.appendChild(canvas);

    var img = canvas.toDataURL("image/png");
    document.body.innerHTML = '<img class="finalbadge" src="'+img+'"/>';
});

Я что-то не так делаю? Или это должен быть html2canvas?

Поскольку на вопрос уже дан ответ, вот JSFiddle, показывающий решение / ответ: https://jsfiddle.net/ROPfiddle/zyj9b6dc/2/

1 Ответ

1 голос
/ 18 февраля 2020

Я не могу сказать вам, если это изменение с версии 0.5.5 на версию 1.0.0 html2canvas.

Тем не менее, кроме обязательного элемента HTML, html2canvas() принимает дополнительную секунду параметр, который является Javascript объектом. Среди этих опций есть свойство с именем backgroundColor , которое принимает значение rgba - таким образом, включая прозрачность. Если вы установите все 4 значения на ноль, вы получите прозрачные скругленные углы обратно.

Так что просто измените 

html2canvas(document.getElementById("badge"))

на 

html2canvas(document.getElementById("badge"), {backgroundColor: "rgba(0,0,0,0)"})
...