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

Question

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

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

<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);
                }

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

Answer 1

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

您需要将背景绘制到画布上，而不是将其用作 CSS 背景，因为这是toDataURL().

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

Answer 2

Better to use html2canvas script.

The code look like this.

html2canvas($("#c"), {
    onrendered: function(canvas) {
        var Image1 = canvas.toDataURL("image/jpeg");
        window.open(Image1);
    }