[英]html2canvas 1.0.0-rc.5 2019 not working with rounded corners/border-radius (image is always rectangular)?
我使用 2016 (0.5.0) 版本的 html2canvas 很長一段時間,因為它總是能很好地滿足我的需要。 現在我必須切換到當前版本,但我有一些問題:
創建的圖像不再有圓角。 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)"})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.