fabric.js에서 캔버스로 이미지를 저장하는 방법

안녕하세요, 메시지를 담고있는 텍스트 객체로 이미지 객체 (tshirt)를 만들어야합니다.

1. 이를 위해 fabric.Image.fromURL () 함수를 사용하여 이미지를로드하고 함수 내부에 tshirt 메시지를 표시 할 텍스트 객체를 만듭니다. 따라서 이미지와 텍스트는 그룹 개체에 속합니다.
2. 새 텍스트를로드 할 때마다 loadText 함수 를 호출 하고 텍스트 객체를 변경합니다.
3. 나는 또한 텍스트를 위 / 아래 / 왼쪽 / 오른쪽 조작하기 위해 4 개의 버튼을 추가했습니다.

4. canvas + image + 텍스트를 saveImg () 함수로 내보낼 수 있지만 jsfiddle에서는 Tained 캔버스에 대한 보안 메시지를 받게 됩니다. 예에서 다른 도메인에서 이미지를로드하고 코드가 다른 도메인에서 실행되기 때문에 발생합니다. 웹 애플리케이션에서 해당 코드를 전혀 문제없이 실행할 수 있습니다.

5. 그게 코드입니다.

    var canvas = new fabric.Canvas('c');
    var scaleFactor=0.4
   
    canvas.backgroundColor = 'yellow';
    canvas.renderAll();
    var myImg = 'http://izy.urweb.eu/files/tshirt.jpg';
   
   
   
    fabric.Image.fromURL(myImg, function(myImg) {
   var img1 = myImg.scale(scaleFactor).set({ left: 0, top: 0 });
   
   var text = new fabric.Text('the_text_sample\nand more', {
               fontFamily: 'Arial',
               fontSize:20,
           });
   
   text.set("top",myImg.height*scaleFactor-myImg.height*scaleFactor+150);
   text.set("left",myImg.width*scaleFactor/2-text.width/2);
   
   var group = new fabric.Group([ img1,text ], { left: 10, top: 10 });
   canvas.add(group);    
   });
   
   
   $('#loadText').on('click',loadText);
   $('#saveImg').on('click',saveImg);
   
   function loadText(){
     console.log($('#logo').val());
      canvas._objects[0]._objects[1].text = $('#logo').val();
      canvas.renderAll();
   }
   
   
   function saveImg(){    
   console.log('export image');
    if (!fabric.Canvas.supports('toDataURL')) {
     alert('This browser doesn\'t provide means to serialize canvas to an image');
   }
   else {
     window.open(canvas.toDataURL('png'));
   }
   }
   
   $('#left').on('click',function(){
   canvas._objects[0]._objects[1].set('left',canvas._objects[0]._objects[1].left-1);
   canvas.renderAll();
   })
   
   $('#right').on('click',function(){
   canvas._objects[0]._objects[1].set('left',canvas._objects[0]._objects[1].left+1);
   canvas.renderAll();
   })
   
   
   $('#top').on('click',function(){
   canvas._objects[0]._objects[1].set('top',canvas._objects[0]._objects[1].top-1);
   canvas.renderAll();
   })
   
   $('#bottom').on('click',function(){
   canvas._objects[0]._objects[1].set('top',canvas._objects[0]._objects[1].top+1);
   canvas.renderAll();
   })
   

6. 이것이 jsfiddle 예제입니다 : http://jsfiddle.net/tornado1979/zrazuhcq/1/

희망이 도움이됩니다. 행운을 빕니다.