CODEWITHSUNDEEP
javascriptcanvascropfabricjs
toliklunev
toliklunev

Reputation: 303

fabric.js Crop path inside object

enter image description here

Hello. I have an example on the above image, and I'm try to relalize it using fabric.js. The problem is i can't crop rect inside. Googling did not helped me. I have a fiddle with my attempts. 

var cropCanvas = new fabric.Canvas('crop', {
  backgroundColor: '#000',
});

fabric.Image.fromURL('https://dl.dropboxusercontent.com/u/17055521/face2.jpg', function(pic){

  var rect = new fabric.Rect({
    left: 0,
    top: 0,
    fill: '#000',
    opacity: 0.79,
    width: cropCanvas.width,
    height: cropCanvas.height,
    selectable: false,
    evented : false
  });

  pic.set({
    selectable: false,
    evented : false
  });

  cropCanvas.add(pic);
  cropCanvas.add(rect);
  pic.centerH().setCoords();

  var path = new fabric.Path('M1.398,84.129c3.305,20.461,9.73,50.635,13.591,67.385c2.354,10.212,12.549,23.734,18.51,30.02c4.923,5.191,27.513,23.343,38.34,27.589c18.604,7.295,33.984,4.187,46.012-8.306c12.028-12.493,25.595-34.78,27.954-43.994c2.587-10.105,5.065-26.842,4.313-37.243c-1.036-14.316-14.224-69.332-16.806-79.55c-4.48-17.735-26.246-48.821-80.609-37.668C-1.66,13.514-1.879,63.844,1.398,84.129z');

  path.set({
    originX: 'center',
    originY: 'center',
  });

  rect.set({
    clipTo: function(ctx) {
      path.render(ctx);
    }
  });

  cropCanvas.renderAll();
});

http://jsfiddle.net/codefucker/mqL55m0f/

Can you help me?

Upvotes: 1

Views: 1387

Answers (1)

shershen
shershen

Reputation: 10003

You should apply cropTo to a pic object not to a rect in your code. Like this:

pic.set({
    clipTo: function(ctx) {
      path.render(ctx);
    }
  });

Check updated fiddle here: http://jsfiddle.net/mqL55m0f/1/

UPD

For having exact same effect - you can add same image twice, with 0.5 opacity. Check new fiddle here: http://jsfiddle.net/mqL55m0f/2/

//1 - adding bg image
fabric.Image.fromURL(imgURL, function(picBg) {
  picBg.set({
    selectable: false,
    evented: false,
    opacity: 0.6
  });
  cropCanvas.add(picBg);
  picBg.centerH().setCoords();


  //2 - adding main image and mask

  /* here goes all other code */

});

Upvotes: 1

Related Questions