小编Pra*_*ini的帖子

我在创建一个图片拼贴应用程序HTML5 canvas使用Fabric.js.我希望用户可以将文件拖放到"文件拖放区域",也可以从本地磁盘"选择文件".请帮我实现这个.

我正在使用此代码添加多个图像.现在,我想将本地磁盘中的图像添加到Canvas中.

//Image 1
 fabric.Image.fromURL('/3.jpg', function (img) {
        var oImg = img.set({ left: 300, top: 300, angle: -15 }).scale(0.9);
        canvas.add(oImg).renderAll();
        canvas.setActiveObject(oImg);

    });

 //Image 2
 fabric.Image.fromURL('/bokeh.jpg', function (img) {
        var oImg = img.set({ left: 300, top: 300, angle: -15 }).scale(0.9);
        canvas.add(oImg).renderAll();
        canvas.setActiveObject(oImg);
    });

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

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

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