使用html2canvas设置canvas的背景颜色

Question

我正在使用 html2canvas 从页面中的元素获取屏幕截图

html2canvas(element).then(canvas => canvas.toDataURL());

可以找到，但唯一出错的是页面的背景颜色被忽略。有没有办法在 html2canvas 中解决这个问题或定义背景颜色？

Answer 1

您可以在快照之前向元素添加背景颜色，并在画布生成后撤消它。

const element = document.getElementById('your-element-id');

// Set background color of the element
element.style.backgroundColor = '#ffffff';  // Replace with your desired background color

// Use html2canvas to capture the element
html2canvas(element).then(canvas => {
    // Reset background color of the element after capturing
    element.style.backgroundColor = 'transparent';  // Reset to default or any other background style

    // Now you can use the canvas
    const dataURL = canvas.toDataURL();
    console.log(dataURL);
});