從畫布中刪除圖像-javascript，javascript，

，

我正在web應用程序的大部分部分已被角js覆蓋。我被困在一個點上。我用fabric.js來處理畫布上的圖像，這是做這件事的最好方法。一切工作正常，但我不能添加關閉按鈕上載圖像中顯示的圖像。從畫布中刪除圖像-javascript，javascript，

enter image description here

該角度圖像臨到畫布標籤。 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

enter image description here

我的問題是得到，我怎麼可能關閉或在畫布上刪除此上傳的圖片？有沒有其他的方法來做到這一點，而不是fabric.js？如果是，請分享..我不想從常用按鈕清除畫布元素。我需要逐個刪除圖像。

來源

2015-05-18 Vineet

試試這個

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

來源

2015-05-18 10:54:57

據工作khawer但我需要添加內部圖像自身十字按鈕帆布。感謝您的回答。 – Vineet

請檢查第二個小提琴。我已經使用過自定義圖片，顯然你會使用自己的圖片，並且需要調整它的位置 –

完美。你的第二個小提琴已經按我的意願工作了。我需要根據我進行修改，但非常感謝給我一種啓動方式.. – Vineet

您可以從工作區中刪除選定的對象，當用戶按下此代碼刪除：

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/

來源

2015-05-18 10:09:47 JUMIK

從畫布中刪除圖像-javascript，javascript，

回答

相關問題