如何用JavaScript获取div的随机背景图（Chrome扩展场景）

我有一个页面会加载随机图片作为背景图，代码如下：

<!-- some other codes -->
<style>
.random-background {
    height: 100px;
    width: 100px;
    background-image: url("https://server-domain.com/random.php");
}
</style>
<div class="random-background"></div>
<!-- some other codes -->

链接https://server-domain.com/random.php每次调用都会返回不同的随机图片，因此无法使用AJAX调用该链接。我正在开发一款Chrome扩展，无法控制服务器行为。是否可以通过JavaScript获取用户当前屏幕上看到的、作为背景的那张具体图片？

这看起来和某问题类似，但区别在于本文的目标元素是div而非img，因此该问题中的解决方案：

context.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);

无法生效，会出现如下错误提示：

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)'.
at :6:9

可以通过将目标div绘制到canvas上来获取当前显示的背景图片，具体步骤如下：

方法一：Chrome扩展特权上下文（内容脚本/后台脚本） #

Chrome扩展的内容脚本可直接使用drawWindowAPI捕获已渲染的div区域，无需重新请求图片链接：

const div = document.querySelector('.random-background');
const rect = div.getBoundingClientRect();

// 创建与div尺寸一致的canvas
const canvas = document.createElement('canvas');
canvas.width = rect.width;
canvas.height = rect.height;
const ctx = canvas.getContext('2d');

// 将div区域绘制到canvas
ctx.drawWindow(
    window,
    rect.left, rect.top, rect.width, rect.height,
    'transparent' // 匹配div背景透明度
);

// 提取图片数据
// 方式1：转为Blob
canvas.toBlob((blob) => {
    console.log('获取到的背景图片Blob:', blob);
    // 可在此处进行保存、上传等操作
});

// 方式2：转为DataURL
const dataURL = canvas.toDataURL();
console.log('获取到的背景图片DataURL:', dataURL);

方法二：通用网页环境（无扩展特权） #

如果无法使用Chrome扩展的特权API，可借助html2canvas库模拟渲染div到canvas：

// 先引入html2canvas，可通过CDN或npm安装
import html2canvas from 'html2canvas';

const div = document.querySelector('.random-background');

html2canvas(div, {
    backgroundColor: null // 保留div原有背景样式
}).then(canvas => {
    // 提取图片数据
    canvas.toBlob((blob) => {
        console.log('获取到的背景图片Blob:', blob);
    });
    const dataURL = canvas.toDataURL();
    console.log('获取到的背景图片DataURL:', dataURL);
});

注意事项 #

• Chrome扩展中使用drawWindow需确保脚本运行在内容脚本或后台脚本上下文，无需额外跨域权限（仅捕获当前页面元素）
• html2canvas为模拟渲染，复杂样式可能存在细微偏差，但对简单背景图场景完全适用
• 两种方法均直接捕获页面已渲染内容，不会触发random.php的重复请求

内容的提问来源于Stack Exchange，提问作者cytsunny