如何使用html2canvas生成一个透明的画布

Question

这似乎应该是一件简单的事情，但却异常困难。

我只是有一个包含一些文本的div DOM元素。

我在它上面调用了html2canvas方法，它能够正常工作。

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

我尝试过:

- 在选项对象上设置background属性为null - 明确地将CSS背景属性更改为透明，应用于生成画布的DOM元素以及画布本身

但不幸的是，什么都没起作用。

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

- Benjamin Sampson

---

也许这会对你有所帮助 https://dev59.com/XW445IYBdhLWcg3wg6xn - Sunil Kumar

Answer 1

您必须将背景颜色传递为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

- emi

---

正是如此。非常感谢！ - Benjamin Sampson

我的代码中{backgroundColor:null}无法正常工作。代码如下：html2canvas(document.querySelector(".resize-wrap"), { backgroundColor: null }).then(canvas => { this.dataURL = canvas.toDataURL(); _marker.MarkerImage = this.dataURL; this.MarkerLists.push(_marker); this.countMarker++; }); - Awais