Geek Answers Handbook

Remove from gallery from canvas - fabricjs (javascript)

I am working on a web application, most of which has been covered by angular js. I'm stuck in one place. I used fabric.js to manipulate the images on the canvas, and this is the best way to do this. Everything works fine, but I can’t add the close button for the downloaded image, as shown in the image.

enter image description here

This angular image appears on the canvas tag. Fabric.js gives me the ability to rotate and add images, but how can I close this particular image. So far I have done with the code:

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

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

My canvas element:

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

My uploaded image element.

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

Below I get from fabric.js

enter image description here

: ? fabric.js? , , . . .

+4
2

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

+4

, 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, . : Custom Delete (, toFront) : http://jsfiddle.net/86bTc/8/

0

More articles:


All Articles