如何在使用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); 
       } 

我已经提到了类似的问题，发现我们可以使用或与地方帆布过去。我没有得到如何实现，当我点击Create Collage按钮，它会捕获背景？我不确定。我正在使用Fabric.js 感谢您的任何帮助。

Answer 1

更好地使用html2canvas脚本。

代码如下所示。

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

Answer 2

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

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

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