Masks for images - Githubissues

polotno-project / polotno-board

Roadmap and bug-tracker for the Polotno project.

https://polotno.dev/

9 stars 1 forks source link

Masks for images #17

Closed lavrton closed 1 year ago

lavrton commented 3 years ago

I want to have the ability to mask a shape with and image. Or in other words, I want to have the ability to "clip" image element by basic shapes.

Example (this is a regular rectangle image, clipped by circle shape):

Now the question is what will be the better API?

Should svg element have ability to be filled by image? Or should image element have ability to be clipped by some shape?

How other apps are working there? Canva, Crello, others?

vasanth-confetto commented 3 years ago

Hi Anton, This is feedback from our designers. They'd would want to use SVG as the "frame" and drag and drop a photo into that frame. Basic shapes could work too, but a lot of times designers like to add rich design to these frames.

lavrton commented 3 years ago

but a lot of times designers like to add rich design to these frames

Can you share how will it look visually? How does frame look? How it looks with image?

lavrton commented 2 years ago

Just to the note, this function is partially implemented via svg element.

p-mohamed-elsawy commented 10 months ago

@lavrton How can this be done using svg ?

lavrton commented 9 months ago

@p-mohamed-elsawy there are two ways to make it work in Polotno right now.

You can use image element and set clipSrc to cut image content.
You can use svg element and set maskSrc to fill svg with image.

MichaelDimmitt commented 1 month ago

The image DEFAULT_SECTIONS has a masking functionality, I upgraded to "polotno": "^2.8.3", today and was pleasantly suprised. 🙂