使用 toDataURL("image/png") 时如何捕获 HTML5 Canvas 的背景？

Question

我正在创建一个拼贴制作应用程序。

这是Canvas的代码。图像出现在画布的背景中。

<canvas id="c" width="800" height="600" style="left: -300px; background-image: url('_include/img/Images/rainy_day-1366x768.jpg');"></canvas>

但是，当我单击Create Collage按钮时，背景是透明的。如何捕获带有背景图像的画布？

按钮点击代码：

function convertCanvasToImage() {
                    var canvas = document.getElementById('c');
                    var image_src = canvas.toDataURL("image/jpeg");                     
                    window.open(image_src);
                }

我已经提到了类似的问题，发现我们可以使用 or 并将 Canvas 放在它上面。我不知道如何实现它，当我单击Create Collage按钮时，它会捕获背景吗？我不确定。我正在使用 Fabric.js 感谢您的帮助。

Answer 1

你不能！CSS 背景不是画布的一部分（只是该元素作为其他元素的背景）。

您需要将背景绘制到画布上，而不是将其用作 CSS 背景，因为这是 捕获的唯一数据toDataURL()。

如果您正在使用clearRect或fillRect更新画布，您可以考虑使用drawImage背景图像。