mifi / editly

Slick, declarative command line video editing & API
MIT License
4.64k stars 295 forks source link

Adding fabricImagePostProcessing callback #222

Closed Ivanca closed 1 year ago

Ivanca commented 1 year ago

Adding the fabricImagePostProcessing callback so users can modify the generated Fabric.Image right before being rendered.

For example this makes masking videos using ClipPath (from fabric.js API) easy by adding a bit of code:

await editly({
  outPath: './output.mp4', 
  clips: [{
    duration: 4, layers: [
      { type: 'video', path: './assets/lofoten.mp4', cutFrom: 0, cutTo: 4 },
      { 
        type: 'video', 
        path: './assets/hiking.mp4',
        cutFrom: 0, cutTo: 4, 
        resizeMode: 'cover',
        originX: 'center', originY: 'center',
        left: 0.5, top: 0.5, width: 0.5, height: 0.5,
        fabricImagePostProcessing: async ({image, progress, canvas})=> {
          const circleArgs = {
            radius:  Math.min(image.width, image.height) * 0.4,
            originX: 'center',
            originY: 'center',
            stroke: 'white',
            strokeWidth: 22,
          };
          image.setOptions({ clipPath: new fabric.Circle(circleArgs) });
          canvas.add(new fabric.Circle({
            ...circleArgs,
            left: image.getCenterPoint().x,
            top: image.getCenterPoint().y
          }));   
        }
      }
    ]}
  ]
});

https://user-images.githubusercontent.com/907138/214545896-ab420beb-bd50-4974-9bad-9657e4f0c849.mp4

Ivanca commented 1 year ago

Fixed linting issues that were making the build fail, as well as deleting a console.log statement I added by mistake.

mifi commented 1 year ago

Very cool! I can merge this PR but I'm not sure what's the purpose of the progress argument. How would one use that? Your code does not use it

Ivanca commented 1 year ago

Progress helps with animation, but maybe in seconds instead of percentage would be more useful for that kind of stuff.

https://user-images.githubusercontent.com/907138/219903279-c6950dfe-db1c-4e4b-98ae-7bdeb82d1bc8.mp4