如何使用 html2canvas 生成透明画布

Question

这看起来应该是一件简单的事情，但它非常困难。

我只是有一个 div DOM 元素，里面有一些文本。

我正在调用 html2canvas 方法，它正在查找。

唯一的问题，画布有白色背景！

我试过：

• 将选项对象上的背景属性设置为 null
• 在画布和生成它的 DOM 元素上显式地将 CSS 背景属性更改为透明

不幸的是，似乎没有任何效果。

希望有一个优雅的解决方案，但快速破解是可以的。

Answer 1

您必须将 backgroundColor 传递为 null，请参阅：https : //html2canvas.hertzen.com/configuration

let el = document.querySelector("#my-div")
html2canvas(el,{backgroundColor:null}).then(canvas => {
  document.body.appendChild(canvas)  
})

工作示例：https : //codepen.io/emilio/pen/oaGLmb?editors=1111