解决 html2canvas 生成图片 border-radius 异常问题

67 阅读1分钟

需要生成带有透明背景的图片的话

 html2canvas($dom[0], {
    useCORS: true,
    backgroundColor: null,
})

然后再在获取图片base64的时候 定义为 image/png类型的图片即可

canvas.toDataURL("image/png")

这种方法的原理是利用 canvas 的能力来渲染内容,而不是依赖于 html2canvas 内部的背景色处理。通过将 backgroundColor 设置为 null,你可以告诉 html2canvas 不要为 canvas 设置背景色,这样在生成图片时就不会受到背景色的影响。然后在调用 toDataURL 方法时指定图片格式(如 "image/png"),这样可以确保导出的图片格式正确,并且保留了透明背景。