javascript - 从 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

试试这个

$('#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