将织物图像插入画布

Insert fabric image onto canvas

本文关键字：插入 图像      更新时间：2023-09-26

我设置了一个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);
});

当我点击一个图像时，我绘制的背景图像被完全清除。我该怎么修理它?我的代码现在也无法呈现多个导入的图像?我如何保持上传的背景图像和控制导入的图像，如果他们是背景层?

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

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

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

相关文章：