带有背景图像的 DOM 元素到画布

Question

我必须制作一个包含网站缩略图的库。

我使用 Javascript 将 HTML 和样式转换为序列化的 XML 数据：

serialized = new XMLSerializer().serializeToString( html );

之后我从序列化的字符串创建字符串数据：

var data = '<svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '">' +
'<foreignObject width="100%" height="100%">'
+ serialized +
'</foreignObject>' +
'</svg>';

在我在 canvas 元素上打印这些数据后，我发现除了 div 的背景图像之外一切都正常。

如何将包含 background-image 属性的 DOM 元素转换为与画布一起使用？

谢谢， 亚历克斯

Answer 1

我找到了解决方案。将 url 转换为 base64 并且工作正常。