javascript - html2canvas 1.0.0-rc.5 2019不能用于圆 Angular/边界半径(图像始终为矩形)？

我使用html2canvas的2016（0.5.0）版本已经很长时间了，因为它始终可以很好地满足我的需求。现在我必须切换到当前版本，但是我有一些问题：

创建的图像不再具有圆角。 png始终为矩形。现在，我问自己是否做错了什么，或者它可能是当前版本的html2canvas中的错误？我想先在这里问一下，然后再将其作为“问题”发布到GitHub上。

2016 0.5.5版本的结果：https://i.imgur.com/gxutBEY.png（圆角）
2019 1.0.0版本的结果：https://i.imgur.com/LLY9WpI.png（矩形角）

这是显示问题的JSFiddle：https://jsfiddle.net/ROPfiddle/jskLuw3v/3/

这是html2canvas的当前版本（1.0.0-rc.5）：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/

最佳答案

我无法告诉您这是否是html2canvas的0.5.5版本到1.0.0版本的更改。

但是，除了必需的HTML元素之外，html2canvas()接受一个可选的第二个参数，它是一个Javascript对象。这些选项中有一个名为backgroundColor的属性，该属性接受rgba值-因此包括透明度。如果将所有4个值都设置为null，则返回透明圆角。

所以简单地改变

html2canvas(document.getElementById("badge"))

至

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

关于javascript - html2canvas 1.0.0-rc.5 2019不能用于圆 Angular/边界半径(图像始终为矩形)？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60282042/