使用html2canvas截图时，如何修复背景色丢失或设置Canvas背景色？

当然可以修复这个问题，甚至能自定义截图的背景色，给你两个实用方案：

1. 捕获页面原有背景色 #

html2canvas默认不会自动继承父元素（比如body）的背景色，你可以通过配置项手动指定页面实际的背景色：

// 获取body的真实背景色
const pageBg = getComputedStyle(document.body).backgroundColor;
html2canvas(element, {
  backgroundColor: pageBg
}).then(canvas => canvas.toDataURL());

如果目标元素本身设置了背景但没被捕获，检查一下元素的背景样式是不是用了background: transparent，或者有没有通过伪元素设置背景（html2canvas对伪元素的支持有限）。

2. 自定义背景色 #

直接在html2canvas的配置里指定你想要的颜色值即可，支持十六进制、rgba等格式：

html2canvas(element, {
  backgroundColor: '#f5f5f5' // 自定义浅灰色背景
}).then(canvas => canvas.toDataURL());

要是想保留部分区域透明，把backgroundColor设为"transparent"就行。

内容的提问来源于stack exchange，提问作者Jeanluca Scaljeri