Нарисуйте прямоугольник с сохранением образа

Question

Я новичок в угловую, HTML, JavaScript, и я не выяснить, как создать скрипку, чтобы объяснить мою проблему (извините), так что я загрузил в мой Dropbox: https://www.dropbox.com/s/60efg5vo3qql29c/image_canvas.zip?dl=0

Итак, что я пытаюсь сделать, это загрузить изображение из моей базы данных в холст, а затем нарисовать один или несколько прямоугольников с помощью fabricjs с текстом в нем, но когда я это сделаю, изображение исчезает и появляется только новый рисованный прямоугольник , что я делаю неправильно? благодарит заранее.

[EDIT]

Это мой угловой файл

$scope.addRectangleToCanvas = function() { 
    try { 
     var c = document.getElementById('canvas'); 
     var colorPicker = $('#btnColor'); 
     var fontPicker = $('#bntfontsize'); 
     var canvas = new fabric.Canvas('canvas', { selection: true }); 

     var selText = $('#txtCustomComments').val(); 

     var color = new fabric.Color(colorPicker.val()).toRgb(); 

     var fontSize = fontPicker.val(); 

     commentText = new fabric.IText(selText, { 
      fontSize: fontSize, 
      hasControls: false, 
      hasBorders: true, 
      originX: 'center', 
      backgroundColor: 'rgba(0,0,0,0)', 
      borderColor: color, 
      opacity: 0.6, 
      fill: color, 
      fontFamily: "helvetica" 
     }); 

     var commentRectange = new fabric.Rect({ 
      originX: 'center', 
      top: 30, 
      width: 300, 
      height: 200, 
      fill: 'rgba(0,0,0,0)', 
      stroke: color, 
      strokeWidth: 4 
     }); 

     var group = new fabric.Group([commentText, commentRectange], { 
      left: 100, 
      top: 150 
     }); 

     canvas.add(group); 
     canvas.bringForward(group); 

    } catch (exception) { 
     alert(exception); 
     console.log(exception); 
    } 
}; 


$scope.GetNextNodes = function() { 

    var commentRectange, commentText; 
    var canvas = new fabric.Canvas('canvas', { 
     selection: true 
    }); 
    var colorPicker = $('#btnColor'); 
    var fontPicker = $('#bntfontsize'); 
    var image = new Image(); 
    var imageComp; 

    image.crossOrigin = "Anonymous"; 
    image.onload = function() { 
     //imageComp = fabric.Image('https://upload.wikimedia.org/wikipedia/commons/0/0e/American_Black_Bear_%283405475634%29.jpg', function (img) { 
     imageComp = fabric.Image.fromURL('https://upload.wikimedia.org/wikipedia/commons/0/0e/American_Black_Bear_%283405475634%29.jpg', function (img) { 

      var oImg = img.set({ 
       angle: 0, 
       cornersize: 10, 
       hoverCursor: "default", 
       lockMovementX: true, 
       lockMovementY: true, 
       lockRotation: true, 
       hasRotatingPoint: true, 
       hasControls: false, 
       hasBorders: false, 
       lockScalingFlip: true, 
       lockScalingX: true, 
       lockScalingY: true, 
       lockSkewingX: true, 
       lockSkewingY: true, 
       height: image.naturalHeight, 
       width: image.naturalWidth 
      }); 
      canvas.add(oImg).setActiveObject(oImg); 
      canvas.moveTo(oImg, window.objectIndex); 
     }, { crossOrigin: 'Anonymous' }); 
     canvas.setHeight(image.naturalHeight); 
     canvas.setWidth(image.naturalWidth); 
    }; 
    image.src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/American_Black_Bear_%283405475634%29.jpg";   

}; 


$scope.GetNextNodes(); 

Это мой Html

<div id="page-wrapper"> 

    <div class="main-dropdown"> 
     <span>Nombre:</span> 

     <input id="txtCustomComments" name="Comment" value="zona" placeholder="Custom comments here" class="pls-select-comments" type="text"> 
     <button name="btn-apply" id="btnApplyComments" value="apply" class="comment-apply-btn" ng-click="addRectangleToCanvas()"> 
      Agregar 
     </button> 
    </div> 

    <div class="font-setting"> 
     <div class="row"> 
      <div class="color-picker"> 
       <span>Font Color:</span> 
       <input id="btnColor" class="wmc-font-color" name="favcolor" value="#FF0000" type="color"> 
      </div> 
      <div class="main-font-size"> 
       <span>Font Size:</span> 
       <input id="bntfontsize" class="wmc-font-size" min="6" max="72" step="2" value="20" type="number"> 
      </div> 
     </div> 
    </div> 
    <br /> 
    <br/> 
    <canvas id="canvas" style="border:1px solid #d3d3d3;" /> 

</div> 

Answer 1

Вы, кажется, холст повторного объявления в addRectangleToCanvas функции с линией

var canvas = new fabric.Canvas('canvas', { selection: true }); 

. Попробуйте сохранить ссылку на функцию getNextNodes и затем действовать на нее

var canvas; 
$scope.GetNextNodes = function() { 
    canvas = new fabric.Canvas('canvas'); 
    //... 
} 

$scope.addRectangleToCanvas = function() { 
    canvas.add... // Do whatnot here with the canvas w/o redeclaring 
} 

Answer 2

Объявление переменных под $ scope помогло.

$scope.commentRectange; 
$scope.commentText; 
$scope.canvas = new fabric.Canvas('wmcCanvas', { 
    selection: true 
}); 
$scope.colorPicker = $('#btnColor'); 
$scope.fontPicker = $('#bntfontsize'); 
$scope.image = new Image(); 
$scope.imageComp; 
$scope.oImg; 
$scope.group;