在使用 html2canvas 將網(wǎng)頁渲染成圖片的時候，我們經(jīng)常需要設(shè)置圖片的背景顏色來達到預期的效果。在本文中，我們將介紹如何使用 html2canvas 設(shè)置背景顏色。

首先，我們需要通過 html2canvas 生成圖片的代碼：

html2canvas(document.body).then(canvas =>{
document.body.appendChild(canvas)
});

這段代碼會將整個網(wǎng)頁渲染成圖片，然后添加到頁面中。若您想設(shè)置背景顏色，可以使用 html2canvas 的 options 參數(shù)：

html2canvas(document.body, {
backgroundColor: "#f5f5f5"
}).then(canvas =>{
document.body.appendChild(canvas)
});

在 options 對象中，我們可以設(shè)置 backgroundColor 屬性來設(shè)置圖片的背景顏色。這里的 "#f5f5f5" 是一個十六進制顏色值，您可以根據(jù)需要更改。

如果您希望使用 CSS 中定義的顏色，可以使用 window.getComputedStyle()。

const bodyStyle = window.getComputedStyle(document.body);
const backgroundColor = bodyStyle.getPropertyValue("background-color");
html2canvas(document.body, {
backgroundColor
}).then(canvas =>{
document.body.appendChild(canvas)
});

這里的 backgroundColor 變量會從頁面中獲取背景顏色并設(shè)置為圖片的背景顏色。

以上就是如何使用 html2canvas 設(shè)置圖片背景顏色的方法。希望本文能夠?qū)δ兴鶐椭?/p>