html2canvas导出radio标签错位 版本1.0.0

Question

html2canvas+jspdf导出radio标签错位 使用的版本1.0.0

Answer 1

在使用html2canvas进行HTML转图片的时候，由于模拟渲染和实际浏览器渲染可能存在差异，因此对于具有良好渲染效果的图形（比如svg）或者具有浏览器自定义样式的元素（比如radio，checkbox），可能会出现渲染结果不符合预期的情况。
针对你的问题，有几种解决方式：

使用css伪类或者替代图像替代原生radio样式，这样无论何时radio的样式都会保持一致。

input[type="radio"] {
    display: none;
}

input[type="radio"] + label::before {
    content: "";
    display: inline-block; 
    /* 这里可以引入自定义图像或者设置你的样式代替原生radio*/
}
input[type="radio"]:checked + label::before{
    /*这里设置选中后的样式*/
}

以上是在label元素后连接input radio，然后使用伪类实现样式的一个示例。
注意以上示例是对于结构如下的HTML有效：

<input type="radio" id="radio1" name="radio" /><label for="radio1"></label>

第二种方式就是在生成图片之前更改radio为图像或者svg，生成之后再换回来，这样用户体验会更好一点。
如果以上方式都不能解决你的问题，你可以尝试使用其他版本的html2canvas，或者寻找其他的html转图片的库。
如果以上方案都不能解决你的问题，也许你可能需要提供更多的信息来寻找更具体的解决方案，比如部分引起问题的代码，目前的CSS样式，或者具体的问题截图等。