在客户端获取html背景图像对象

Question

背景： 我写了一个网站，用于创建接线图，用户将产品从列表拖到div上，然后产品出现。该产品是一个div，其类名为产品的标题，图像位于类的background-image属性中。

问题： 我现在正在尝试实现“另存为图像”功能。我正在迭代div并抓住背景图像的url并使用url作为图像的来源：

        var image = new Image();
        image.onload = function () {
            context.drawImage(image, parseInt(left), parseInt(top));
        };
        image.src = $(this).css('background-image').replace(/"/g, "").replace(/url\(|\)$/ig, "");

在此之后，我将图像转换为png并显示它。

var img = canvas.toDataURL('image/png');
document.write('<img src="' + img + '"/>');

结果是空白图像。

我尝试过： 我怀疑我的问题是我正在向图像源提供格式化的URL，并且浏览器再次从服务器获取图像。这次往返发生的速度比代码慢。我通过将代码块分成单独的函数并分别触发它们来确认这一点，一个绘制画布，一个转换并显示图像。每个功能都由单独的按钮触发。这确实有效，因此功能之间增加的延迟允许图像加载。

问题： 我想我将错误地检索图像对象。如何检索作为div的背景图像的缓存图像对象。图像在客户端，在我的生活中，我找不到任何在线检索此对象的内容。我觉得这很简单。 感谢您的帮助。