Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/427.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript html2canvas 1.0.0-rc.5 2019不适用于圆角/边界半径(图像始终为矩形)?_Javascript_Canvas_Html2canvas - Fatal编程技术网

Javascript html2canvas 1.0.0-rc.5 2019不适用于圆角/边界半径(图像始终为矩形)?

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的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:


我不能告诉你这是否是从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)"})