版本为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的0.5.5到1.0.0版本的更改。
尽管在必需的HTML元素旁边,html2canvas()
接受一个可选的第二个参数,它是一个Javascript对象。在这些选项中,有一个名为backgroundColor的属性,该属性接受rgba值-因此包括透明度。如果将所有4个值都设置为null,则返回透明的圆角。
因此只需更改
html2canvas(document.getElementById("badge"))
to
html2canvas(document.getElementById("badge"), {backgroundColor: "rgba(0,0,0,0)"})