从画布中删除图像 - fabricjs（javascript）

Question

我正在开发Web应用程序，大部分内容已被angular js覆盖。 我陷入了困境。 我使用fabric.js来操作画布上的图像，这是最好的方法。 一切正常，但我无法在上传的图像上添加关闭按钮，如图所示。

这个角度图像出现在画布标签上。 Fabric.js使我能够旋转和添加图像，但我怎么能关闭这个特定的图像。 到目前为止，我完成的代码是：

var canvas = window._canvas = new fabric.Canvas('c');

    var imgElement = document.getElementById('my-image');
    var imgInstance = new fabric.Image(imgElement);
    canvas.add(imgInstance);

我的画布元素：

<canvas height="282" width="181" id="c" class="lower-canvas"></canvas>

我上传的图片元素。

<img style="display: none;" src="http://*******/angular.png" class="topimg canvas-img" id="my-image">

以下是我从fabric.js获得的内容

我的问题是，如何在画布上关闭或删除此上传的图像？ 有没有其他方法来做这个而不是fabric.js？ 如果是，请分享..我不想从普通按钮清除画布元素。 我需要逐个删除图像。

Answer 1

试试这个

$('#remove').click(function(){
    var object = canvas.getActiveObject();
    if (!object){
        alert('Please select the element to remove');
        return '';
    }
    canvas.remove(object);
});

按钮单击时删除对象的小提琴

摆弄对象上的自定义删除按钮

Answer 2

当用户使用以下代码按下DELETE时，您可以从画布中删除所选对象：

window.onkeydown = onKeyDownHandler;

function onKeyDownHandler(e) {
   switch (e.keyCode) {
      case 46: // delete
         var activeObject = canvas.getActiveObject();
         if (!activeObject) canvas.remove(activeObject);
   }
   e.preventDefault(); 
};

您可以操作FabricJS中的控件，但需要花费一些精力。 查看此问题： 向控件和此小提琴添加自定义删除（后退，前移）按钮 ： http ： //jsfiddle.net/86bTc/8/