如何使用 html2canvas 生成透明 canvas

Question

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

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

我正在调用它的 html2canvas 方法，它正在工作。

唯一的问题，canvas 有一个白色背景！

我试过了：

• 将选项对象的背景 属性 设置为 null
• 明确地将 CSS 背景 属性 更改为 canvas 和 DOM 元素的透明背景

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

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

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