Clipping Objects to/From Other Objects
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Pardon the title gore. I'm not quite sure how to phrase this, so here goes:

Hi. My problem is that right now I have to create an image for each variation of background, frame, and accent (screams internally). I’m looking for a solution that takes advantage of Fabric.js 1.7.22 and jQuery 3.3.1 to do the following:

  • Set 1 of several background images at a time (setBackgroundImage, I’d guess)
  • Set 1 of several frame images at a time
  • Add a photo from my device which will be movable but be bound/clip to the inside portion of the frame image (in fiddle)
  • Add accent images which should be movable, always be behind a frame, but not above the photo inside said frame (which would have been added from my device)

Here is an Imgur gallery with a few example assets and a marked-up image that breaks down what I’m trying to describe: https://imgur.com/a/81g5dCg (you don’t need to use these; just demonstrative)

And here is a JSFiddle that I was working on that may help better depict what I’m after:
http://jsfiddle.net/code4ever/46gd3wsc/

Thanks, and please let me know if I can add any info that will help you produce a solution. As always I’m willing to tip for additional help!

awarded to Wuddrum

Crowdsource coding tasks.

3 Solutions


How does this look: http://jsfiddle.net/46gd3wsc/56/. I can add or change whatever you need.

Hi there, so I'm going to dive into this in parts to try and best explain what I'm after:
  1. BG1 is good; if you could take what you did there, make it unmovable, and so that if you press BG2, for example, BG2 replaces BG 1 and vice versa. The BG image should always be behind everything, including the image added from device
  2. Frame 1 is good too, however, the Image from Device should be confined to the inside of the frame (is something like this possible? Imagine seeing a framed portrait in real life. I'm trying to replicate that- the uploaded image should remain behind the frame (and not overlap from behind). I will try to write
  3. The accent functionality seems fine but I won't know if it looks right until we can confirm #2
I hope this helps. Will add a sketch/flow. Thank you
sharper 6 days ago
I also noticed that in the JSFiddle the front/back saving and Printing stops working with these additions. If you add a background for example it doesn't seem to want to save/print both sides
sharper 6 days ago
Ok that all makes sense. I'm not sure why other functionality stopped, Ill look into it. Do you want to have so both a frame and a background can exist at the same time?
jduplessis294 6 days ago
Yes, exactly!
sharper 6 days ago

Hi.
As far as I understood your problem, i have made this solution, please check it out and let me know if it is what you were looking for or not.

For more information, please check out the below links:

Thanks.

Hi, this looks interesting, I gave it a try and would something like this be possible? (copied from below): the Image from Device should be confined to the inside of the frame (is something like this possible? Imagine seeing a framed portrait in real life. I'm trying to replicate that- the uploaded image should remain behind the frame (and not overlap from behind)
sharper 6 days ago
Hi, you can use Grouping for this purpose, I have updated the Fiddle, please check it out.
Hasan Bayat 6 days ago
Hi, thanks for checking this out. I was looking for more of what Wuddrum was going for. I appreciate the help, though. Interesting take on the problem
sharper 6 days ago

Hey, here's my solution for the problem: JSFiddle

Contains BG/Accent/Frame switching and profile image moving within frame. I'll continue looking for smaller issues, but this should be a complete solution.

EDIT: Here's a fix for glitchy z-indexes(ordering): JSFiddle

You'll have to deselect the movable object, before it falls back to its correct z-index.

EDIT2: Just realized that you want multiple accent images, so I adjusted accordingly. Also some more zindex improvements, text will now always be on top of everything else. Also, accent images are stacked in the order they were added to canvas. EDIT3: Forgot to include JSFiddle.

EDIT4: Fixed the printing issue - JSFiddle.

EDIT5: Changes in comments - JSFiddle.

This is what I am going for! This looks great. Do you know if there is a way to make this work but also "invertedly clip" the uploaded image to a circular frame, like in this test? https://jsfiddle.net/code4ever/vg3ap1xd/ Forgive my naivety; this would be AMAZING if possible- I'm just not sure what to call it. I'd be willing to tip for this if you're interested and able to produce it. Thanks for your help.
sharper 6 days ago
Hey, I was still working on fixing bugs that I could find and now I'm finished. Check my last EDIT for the latest solution. I limited picture scaling a bit, so it doesn't scale bigger than the frame. Implemented json saving and loading that supports all the new changes. Fixed back/front image composition with the new implementation. And on top of that, seems like the download feature has stopped working on latest FireFox. I even checked the original @kostasx solution, where the save feature was added, and it wasn't working there either. So I did some research/debugging and managed to fix the issue, so everything's now in working order. Any extra tips are appreciated.
Wuddrum 6 days ago
As for masking the image with an oval-shaped frame, that's unfortunately impossible... kinda.
FabricJs doesn't support masking with png images, only with shapes and SVG images. So the only way I see this possible would be to define a custom round shape for each frame that's not square and then clip the associated image with the custom shape. But that's a process that should be done when you have all/most of the frames you want. And the process itself will probably prove to be quite complex and take a lot of time. Here's a demo JSFiddle of oval clipping. Select an image first and only then add the oval frame and you'll see how the clipped image would behave.
EDIT: Provided the correct JSFiddle link.
Wuddrum 6 days ago
Hey, wow, thanks for checking into those for me and making those changes. I see what you mean by the oval cropping; good to know! Can you think of any alternative way to produce that result, which may work alongside or perhaps even instead of Fabric.js? I appreciate all your help. This will be fun to play with today. :)
sharper 6 days ago
Thank you for the tip!
I actually don't think there are any frameworks that support such image masking with PNG images. Because, how would the library know which par to mask? The middle could be filled with some custom color, that could be used as an indicator for what part to keep visible. Another way would be for the framework to use some floodfill algorithms to decide which invisible areas are on the inside and should not mask the image. But the codebase and probably performance issues behind these solutions would most likely be a "little" too much.
So I think my previous idea, about each non-rectangular frame having its own custom masking shape, would probably be the best option. Still, not an easy solution. And not applicable if users are allowed to upload custom frames
Wuddrum 6 days ago
Also, I found a fiddle where someone's demo-ing the ability to actually move, scale and rotate the image within the masking shape. So that it would behave better than the default example I provided in the previous comment. Here's the JSFiddle.
Wuddrum 6 days ago
You're most welcome! That all makes sense. Hey, thanks for taking the time here. I do appreciate it. Going to play with this stuff now!
sharper 5 days ago
View Timeline