Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding fabricImagePostProcessing callback #222

Merged
merged 1 commit into from
Feb 19, 2023
Merged

Conversation

Ivanca
Copy link
Contributor

@Ivanca Ivanca commented Jan 25, 2023

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
          }));   
        }
      }
    ]}
  ]
});
alpha.mp4
@Ivanca
Copy link
Contributor Author

Ivanca commented Feb 4, 2023

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

@mifi
Copy link
Owner

mifi commented Feb 18, 2023

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
Copy link
Contributor Author

Ivanca commented Feb 18, 2023

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

alpha.mp4
@mifi mifi merged commit 41e2a90 into mifi:master Feb 19, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
2 participants