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

使用toDataURL时，如何捕获HTML5 Canvas的背景（＆＃34; image / png＆＃34;）？

2 个答案: