将织物图像插入画布答案

【问题标题】：Insert fabric image onto canvas将织物图像插入画布
【发布时间】：2017-02-24 14:29:41
【问题描述】：

我设置了一个 ID 为 edit-canvas 的画布。首先，我上传一张背景图片并将其渲染到该画布上。现在我想导入可以使用 Fabricjs 操作（缩放、拖动...）的其他图像。我有这样的功能，以便在进一步操作之前每次单击它们时导入图像：

function insertImage(src){
    var canvas=new fabric.Canvas('edit-canvas');
    canvas.setBackgroundImage(url,canvas.renderAll.bind(canvas));
    fabric.Image.fromURL(src, function (img) {
        var oImg = img.set({left:0,top: 0});
        canvas.add(oImg).renderAll();
        canvas.setActiveObject(oImg);
    });
}

$('#sticker-tool .sticker-selection img').click(function(){
                    insertImage(this.src);
});

当我点击一张图片时，我绘制的背景图片会被完全清除。我该如何解决？我的代码现在也无法渲染多个导入的图像？如何保留上传的背景图片并控制导入的图片，就好像它们是背景图层一样？

【问题讨论】：

标签： javascript jquery html canvas fabricjs

【解决方案1】：

为什么每次调用insertImage时都要创建一个新的fabric实例并设置背景？

var canvas=new fabric.Canvas('edit-canvas'); canvas.setBackgroundImage(url,canvas.renderAll.bind(canvas));

调用一次，然后只使用insertImage 函数添加新图像。

【讨论】：