[英]Can't apply border radius to canvas (html2canvas)
html div 看起来不错。
但是当我使用 html2canvas 时,图像显示错误。
背景
#ref{
width: 360px;
height: 360px;
background: url(/assets/refer/bec.jpg) 0 0 no-repeat;
background-size: cover;
overflow: hidden;
margin-top: 15px;
margin-left: 70px;
float: left;
}
我用它来四舍五入
.circular {
background-size: cover;
display: block;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 150px;
height: 150px;
border-radius: 150px;
margin: 70px auto;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
}
html2canvas
html2canvas(document.getElementById("qqq"), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
},
width: 500,
height: 500
});
我究竟做错了什么? 泰
据我所知,html2canvas 边框半径应该是最大宽度或高度的一半。在你的情况下,它应该是最大 75。
.circular {
background-size: cover;
display: block;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 150px;
height: 150px;
border-radius: 75px;
margin: 70px auto;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
}
画布拾取边界半径很好。 也许您的内容没有覆盖边缘,所以您看不到它。 尝试确保您的内容填满画布并覆盖角落
这是 html2canvas 上报告的错误(请参阅此处),并且已将修复程序合并到存储库中。
如果您使用的是 0.4.1 版,请按如下方式编辑function calculateCurvePoints
:
...
blh = borderRadius[3][0],
blv = borderRadius[3][1];
var halfHeight = Math.floor(height / 2);
tlh = tlh > halfHeight ? halfHeight : tlh;
tlv = tlv > halfHeight ? halfHeight : tlv;
trh = trh > halfHeight ? halfHeight : trh;
trv = trv > halfHeight ? halfHeight : trv;
brh = brh > halfHeight ? halfHeight : brh;
brv = brv > halfHeight ? halfHeight : brv;
blh = blh > halfHeight ? halfHeight : blh;
blv = blv > halfHeight ? halfHeight : blv;
var topWidth = width - trh,
rightHeight = height - brv,
...
归功于 Grom-S 报告和解决此问题。
我在使用 Html2Canvas 导出 pdf 时遇到了椭圆形状的问题,所以我将边框半径设置为形状(宽度 + 高度)的一半,所以问题解决了..
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.