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.

Sign up for GitHub

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

Jump to bottom

Understanding Compositing of PNG over GIF #3435

Closed
xsalazar opened this issue Nov 4, 2022 · 5 comments
Closed

Understanding Compositing of PNG over GIF #3435

xsalazar opened this issue Nov 4, 2022 · 5 comments
Labels
question

Comments

@xsalazar
Copy link

xsalazar commented Nov 4, 2022

Question about an existing feature

What are you trying to achieve?

I want to overlay a PNG with a transparency layer on top of a GIF without blending color layers but respecting transparency layers (if that makes sense and is possible).

Ideally, I'm trying to accomplish something similar to ImageMagick's composite which seems like it overlays without blending layers, but still respecting the alpha transparency. It's hard to describe, but hopefully the GIFs below illustrate what I'm seeing versus what I want to get to, if possible.

Reading the documentation, it seemed like source is the blend mode that would do this for me, but it's not working how I imagined. Specifically where the overlay transparency would show the background underneath. Instead, it's behaving as if it's replacing the underlying background with a transparency layer. What's odd here is the overlay still looks like it's blended the colors, so the background is having some impact on the composition.

When you searched for similar issues, what did you find that might be related?

Please provide a minimal, standalone code sample, without other dependencies, that demonstrates this question

await sharp(backgroundPath, {
        animated: true,
      })
        .composite([
          {
            input: overlayPath,
            tile: true,
            top: 0,
            left: 0,
          },
        ])
        .toFile(outputPath);

Please provide sample image(s) that help explain this question

Background GIF

background

Overlay PNG

overlay

Output GIF

over blend mode

combined-cS8Dk5NywlGLvaIV0r-over

source blend mode

combined-cS8Dk5NywlGLvaIV0r-source

What I'm Looking to Accomplish

ezgif com-gif-maker
@zueripat zueripat mentioned this issue Jan 6, 2023
Closed
@xsalazar
Copy link
Author

Closing this as I could never find an answer down this route. I ended up shelling out the command to the ImageMagick shell convert to accomplish this: https://github.com/xsalazar/image-wower/blob/main/app/app.js#L94-L96

@lovell
Copy link
Owner

lovell commented Jan 10, 2023

Hi, sorry, I must have missed this question first time around.

This looks like a GIF palette optimisation problem. With the latest sharp v0.31.3 you'll need to add the following to your pipeline:

  .gif({ reoptimise: true })

https://sharp.pixelplumbing.com/api-output#gif

From the next v0.32.0 release, reoptimise will be renamed reuse, but more importantly, it will automagically select the best option for you when compositing images so this problem goes away.

@xsalazar
Copy link
Author

@lovell Thanks for the tip! I'll have to try this out soon to see if that fixes the problem. If so, you're going to save me so much headache, time, and money from how I managed to get this running in AWS.

@xsalazar
Copy link
Author

xsalazar commented Jan 15, 2023 •
edited

@lovell I just wanted to thank you for being so responsive, and your tip above did solve my issue (though I ultimately pivoted away from .gifs altogether). ❤️

Just to give some context to this question, I work at Slack, and there's a long-standing in-"joke" to make :wow-emoji: for folks when we want to celebrate them, think they're neat, or just want to show that we think they're awesome. There's more detail in this LinkedIn post by the person who started the tradition.

At work, I make a lot of custom emoji for all sorts of silly reasons, but I also found myself in a position where I was creating a lot of these :wow-emoji: manually for people who wanted to spread joy. As any good engineer, after I did the first few hundred by hand, I thought to myself I could definitely automate this.

I took a few stabs, and ended up with an application that worked pretty well, but was running me about $60/mo. in AWS 🤯 I mostly got stuck on this issue I filed here, and had to use a hacky workaround that needed a server running 24/7.

After your response, and seeing it worked, I was determined to engineer a better solution since I no longer needed the hacky workaround. That solution lives in https://github.com/xsalazar/image-wower and, while complex, works decently well! And, most importantly, it should be completely free now 💸

Though the point of this post is larger. I use your library for a lot of my little projects, and it's indispensable -- it's the first library I grab when I need to work with any sort of images. Your work supports https://wowemoji.dev, https://emojimosaic.dev/ and https://downloademoji.dev.

All that to say, I made you a :wow-emoji: just to show that I think the work you do is awesome. If you use Slack, you can upload this file as a custom emoji. If you don't use Slack, you can show your neighbor or print it out and hang it on your fridge.

wow-lovell

@lovell
Copy link
Owner

lovell commented Jan 17, 2023

Ha ha, that's amazing, thank you very much Xavier.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@lovell @xsalazar