从 canvas - fabricjs (javascript) 中删除图像

Question

我正在开发 Web 应用程序，大部分内容已被 angular js 涵盖。我被困在一个点上。我使用 fabric.js 来处理 canvas 上的图像，这是执行此操作的最佳方式。一切正常，但我无法在上传的图片上添加关闭按钮，如图所示。

这张 angular 图片出现在 canvas 标签上。 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元素：

<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

得到的

我的问题是，如何在 canvas 上关闭或删除这张上传的图片？除了 fabric.js 之外，还有其他方法可以做到这一点吗？如果是，请分享。我不想从公共按钮中清除 canvas 元素。我需要一张一张地删除图像。

Answer 1

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

window.onkeydown = onKeyDownHandler;

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

您可以从 FabricJS 操作控件，但这需要一些努力。检查这个问题：Adding Custom Delete (Back,toFront) Button to Controls 这个Fiddle：http://jsfiddle.net/86bTc/8/

Answer 2

试试这个

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

Fiddle for remove object on button click

Fiddle with custom remove button on object

从 canvas - fabricjs (javascript) 中删除图像

remove image from canvas - fabricjs (javascript)

javascript

fabricjs

angularjs