从画布中删除图像-fabricjs(javascript)

Posted

技术标签:

【中文标题】从画布中删除图像-fabricjs(javascript)【英文标题】:remove image from canvas - fabricjs (javascript) 【发布时间】:2015-07-29 17:49:39 【问题描述】:

我正在开发 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   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 ?如果是,请分享..我不想从常用按钮中清除画布元素。我需要一张一张删除图片。

【问题讨论】:

【参考方案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

【讨论】:

它正在工作,但我需要在画布内的图像本身上添加一个十字按钮。谢谢你的回答。 请检查第二个小提琴。我用的是自定义图片,显然你会使用自己的图片,需要稍微调整一下位置 完美。你的第二把小提琴按我的意愿工作。我需要根据我的情况进行修改,但非常感谢给我一个开始的方式..【参考方案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 操作控件,但这需要一些努力。 检查这个问题:Adding Custom Delete (Back,toFront) Button to Controls 还有这个小提琴:http://jsfiddle.net/86bTc/8/

【讨论】:

以上是关于从画布中删除图像-fabricjs(javascript)的主要内容,如果未能解决你的问题,请参考以下文章

将图像拖放到画布(FabricJS)

将fabricjs画布转换为base64图像

使用 FabricJS 裁剪图像

在 FabricJS 画布上拖放和删除对象

仅更改覆盖图像的颜色而不是整个画布 Fabricjs

使用 FabricJs 在同一画布上裁剪多个图像