Add remove icon on image in canvas HTML5 and Fabri

Question

I am using HTML5 and Fabric.js. I am uploading multiple images. But i want user can remove uploaded image. I will show you one screen shot.

I want to add one remove icon on image when user clicked on image.

HTML code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>

<input type="file" id="file">
<input type="color" value="blue" id="fill" />
<select id="font">

Java Sript Code:

var canvas = new fabric.Canvas('canvas');

document.getElementById('file').addEventListener("change", function (e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  console.log("reader   " + reader);
  reader.onload = function (f) {
    var data = f.target.result;
    fabric.Image.fromURL(data, function (img) {
      var oImg = img.set({left: 70, top: 100, width: 250, height: 200, angle: 0}).scale(0.9);
      canvas.add(oImg).renderAll();
      canvas.setActiveObject(oImg);
      // add an event listener
      oImg.on('mousedown', function(){
        // bring the image to front
        oImg.bringToFront();
        });
    });
  };
  reader.readAsDataURL(file);
});

$('#fill').change(function(){
  var obj = canvas.getActiveObject();
  if(obj){
    obj.setFill($(this).val());
  }
  canvas.renderAll();
});

$('#font').change(function(){
  var obj = canvas.getActiveObject();
  if(obj){
    obj.setFontFamily($(this).val());
  }
  canvas.renderAll();
});

function addText() {
  var oText = new fabric.IText('Tap and Type', { 
    left: 100, 
    top: 100 ,
  });

  canvas.add(oText);
  canvas.setActiveObject(oText);
  $('#fill, #font').trigger('change');
  oText.bringToFront();
}

document.querySelector('#txt').onclick = function (e) {
  e.preventDefault();
  canvas.deactivateAll().renderAll();
  document.querySelector('#preview').src = canvas.toDataURL();
};

Css Code:

canvas{
  border: 1px solid black;
}

You can see this link.Write custom text on image canvas with fabric.js and HTML5

After click on cross icon image should be remove. Can we add remove icon. If yes then give me idea about this.

Answer 1

You'll need to draw icon image using selected object's coordinates and it's width and height, rather than having it attached to objects transformation point. If you do su, you'll lost resizing functionality for that transformation point. Also, after object's rotation it will be hard to tell which transformation point is closest to upper right corner. I would preffer to have some exterlal toolbar button, that will do this, or have context menu with it.

add a button, or some other element

<button id="remove" style="display:none">remove</button>

and add this to your code

$('#remove').on('click', function(){
  canvas.getActiveObject().remove();
});

canvas.on('object:selected', function(o) {
  if (o.target.isType('image')) {
    $('#remove').show();
  }
});

canvas.on('selection:cleared', function() {
    $('#remove').hide();
});