如何在使用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代替背景圖像。