Javascript html2canvas 1.0.0-rc.5 2019不适用于圆角/边界半径(图像始终为矩形)?
我使用html2canvas的2016 0.5.0版本很长一段时间了,因为它总是很好地满足了我的需要。现在我必须切换到当前版本,但我有一些问题: 创建的图像不再具有圆角。png始终为矩形。现在我问自己我是否做错了什么,或者这可能是当前版本html2canvas中的一个bug?在将此作为一个问题发布到GitHub之前,我想先问一下这里 2016 0.5.5版本的结果是:圆角 2019 1.0.0版本的结果是:矩形角 下面是一个JSFIDLE,它显示了这个问题: 这是html2canvas的当前版本1.0.0-rc.5: 这是我的CSS: 这是我的HTML,没有base64编码图像: 这是我的JS: 我做错什么了吗?还是一定是html2canvas 由于问题已经得到了回答,下面是显示解决方案/答案的JSFIDLE:Javascript html2canvas 1.0.0-rc.5 2019不适用于圆角/边界半径(图像始终为矩形)?,javascript,canvas,html2canvas,Javascript,Canvas,Html2canvas,我使用html2canvas的2016 0.5.0版本很长一段时间了,因为它总是很好地满足了我的需要。现在我必须切换到当前版本,但我有一些问题: 创建的图像不再具有圆角。png始终为矩形。现在我问自己我是否做错了什么,或者这可能是当前版本html2canvas中的一个bug?在将此作为一个问题发布到GitHub之前,我想先问一下这里 2016 0.5.5版本的结果是:圆角 2019 1.0.0版本的结果是:矩形角 下面是一个JSFIDLE,它显示了这个问题: 这是html2canvas的当前版本
我不能告诉你这是否是从html2canvas的0.5.5版本到1.0.0版本的变化 然而,除了必需的HTML元素之外,html2canvas还接受一个可选的第二个参数,即Javascript对象。在这些选项中有一个名为backgroundColor的属性,它接受rgba值,因此包括透明度。如果将所有4个值都设置为null,则会返回透明圆角 所以只要改变就行了
html2canvas(document.getElementById("badge"))
到
哦,天哪,这真是太棒了!在我提出这个问题之前,我已经尝试了至少三天的一切可能。通常情况下,我首先尝试自己解决它,只有当它根本不起作用时,我才尝试寻求帮助。默默无闻,你真是我心目中的英雄!非常感谢你的帮助!令人难以置信的是,只有这个小小的变化才是真正必要的,使它的工作。你完全正确,它终于起作用了!非常感谢你!真正地呵呵,谢谢你的好意——我知道如果你陷入困境的感觉——我很高兴能帮上忙!
<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>
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(document.getElementById("badge"))
html2canvas(document.getElementById("badge"), {backgroundColor: "rgba(0,0,0,0)"})