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

我已經提到了類似的問題，發現我們可以使用或將Canvas放在上面。 我沒有得到如何實現它，當我點擊Create Collage按鈕時，它會捕獲背景？ 我不確定。 我正在使用Fabric.js感謝您的幫助。

Answer 1

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

您需要將背景繪制到畫布上，而不是將其用作CSS背景，因為這是toDataURL()捕獲的唯一數據。

如果使用clearRect或fillRect更新畫布，則可以考慮使用drawImage而不是背景圖像。

Answer 2

最好使用html2canvas腳本。

代碼看起來像這樣。

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