javascript - 如何使用html2canvas生成透明 Canvas

Question

这个问题已经有答案了:

How to make transparent color white instead of black in html2canvas? (8 个回答)

已关闭 4 年前。

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

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

我正在对其调用 html2canvas 方法，并且它正在工作。

唯一的问题， Canvas 有白色背景!

我尝试过:

• 将选项对象的背景属性设置为 null
• 在 Canvas 和生成它的 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