Crop image in shape of external clipping mask

jquery

(Nithish P K) #1

In my project, I need to do the custom mobile case, mug, t-shirt cropping

The idea is that user uploads an image he wants to use for his personalized product. For example, he wants a t-shirt with some cool designed quote on it. He should be able to move, resize and rotate the image he chose. When he is satisfied with the position of the image on the t-shirt and press ok, the design should be cropped inside that t-shirt template. So what I need is:

  1. Make canvas appear in shape of the product template, maybe clipping mask or something.

  2. Display uploaded image over that with options to move, resize and rotate. It is desirable to show image end edges over that template, maybe even the whole picture but with different opacity outside the template.

  3. On the click button to crop the image inside the template.

I found about fabric.js a few days ago so I am a total beginner in this and I would appreciate any help with this.

I have attached the code what I have tried.

if you have any 1 working example means please share with me,

Thanks in advance.

fabric.Image.fromURL('https://thecrimsonsolutions.com/shopifyobjects.com/uploads/1533709331G4Play.png', function(img){
  img1 = img;
  fabric.Image.fromURL('https://thecrimsonsolutions.com/shopifyobjects.com//uploads/1535008793DfCfhT5-pc-wallpapers-hd.jpg', function(img){
    img1.scaleToWidth(canvas.getWidth());
    img2 = img;
    img2.scaleToHeight(300);
    img2.left = 50;
    img2.top = 50;
    img2.globalCompositeOperation = 'source-atop';
    canvas.add(img1);
    canvas.add(img2);
  });
});

  var canvas = new fabric.Canvas('c', {
      width: $("#c").width(),
      height: $("#c").height()
  });



  var background;
  fabric.Image.fromURL('https://thecrimsonsolutions.com/shopifyobjects.com/uploads/1533709331G4Play.png', function (objects, options) {
      background = objects;
      background.set({
          left: 0,
          top: 0,
          scaleY: canvas.height / background.width,
          scaleX: canvas.width / background.width,
          selectable: false
      });
      
      canvas.add(background);
      canvas.renderAll();
  });