캔버스에 패브릭 이미지 삽입

Question

edit-canvas ID로 캔버스를 설정했습니다. 처음에는 배경 이미지를 업로드하고 캔버스에 렌더링합니다. 이제 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); 
}); 

내가 이미지를 클릭

, 내 그려진 배경 이미지가 완전히 삭제됩니다 : 이미지를 내가 더 조작하기 전에 클릭 할 때마다 가져올 수 있도록 나는이 같은 기능을 가지고 있습니다. 어떻게 해결할 수 있습니까? 이제 내 코드에서 여러 가져온 이미지를 렌더링 할 수 없습니까? 업로드 된 배경 이미지를 유지하고 가져온 이미지를 배경 레이어처럼 보이게 할 수 있습니까?

Answer 1

insertImage을 호출 할 때마다 새 패브릭 인스턴스를 만들고 배경을 설정하는 이유는 무엇입니까?

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

전화는 한 번하고 단지 insertImage 기능으로 새로운 이미지를 추가 할 수 있습니다.