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

extend() background colour changes after composite() #2858

Closed
rexxars opened this issue Aug 24, 2021 · 4 comments
Closed

extend() background colour changes after composite() #2858

rexxars opened this issue Aug 24, 2021 · 4 comments

Comments

@rexxars
Copy link
Contributor

rexxars commented Aug 24, 2021

Are you using the latest version? Is the version currently in use as reported by npm ls sharp the same as the latest version as reported by npm view sharp dist-tags.latest?

Yes.

What are the steps to reproduce?

// Create an empty 150x150 image with fully transparent background
sharp({create: {height: 150, width: 150, channels: 4, background: '#fff0'}})
  // Add a square to the center of the image, with colour #bf1942 and 0.8 alpha
  .composite([
    {
      input: {
        create: {
          width: 140,
          height: 140,
          channels: 4,
          background: '#bf1942cc',
        },
      },
    },
  ])
  // Extend the image, adding a border with the same colour and alpha as the square
  .extend({
    background: '#bf1942cc',
    bottom: 10,
    left: 10,
    top: 10,
    right: 10,
  })
  .png()
  .toFile('out.png')

What is the expected behaviour?

I would think that the square in the center and the extension to the image would have the same colour.

What is the observed behaviour?

The square and the extension has differing colours.

out

If I specify premultiplied: true to the first step of the composite operation, they seem to have the same colour, but not the one I am expecting (#bf1942).

If I do not run the composite() operation, the extension has the correct colour.

What is the output of running npx envinfo --binaries --system?

  System:
    OS: macOS 11.3
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 36.26 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.15.4 - ~/.nvm/versions/node/v14.15.4/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.15.4/bin/yarn
    npm: 7.17.0 - ~/.nvm/versions/node/v14.15.4/bin/npm
    Watchman: 2021.06.07.00 - /usr/local/bin/watchman
@rexxars rexxars added the triage label Aug 24, 2021
@lovell
Copy link
Owner

lovell commented Aug 26, 2021

It looks like the extend background is not premultiplied, plus it looks like resize({ fit: 'contain' } and affine() are similarly affected.

To fix this, I think we'll need to pass shouldPremultiplyAlpha as an additional parameter to ApplyAlpha that optionally premultiplies the background colour.

sharp/src/common.cc

Lines 773 to 776 in 3402656

/*
Apply the alpha channel to a given colour
*/
std::tuple<VImage, std::vector<double>> ApplyAlpha(VImage image, std::vector<double> colour) {

@lovell lovell added bug and removed triage labels Aug 26, 2021
@lovell lovell added this to the v0.29.1 milestone Aug 26, 2021
@lovell
Copy link
Owner

lovell commented Aug 29, 2021

Commit 60adc11 fixes this and adds a test that would previously have failed. Thanks for reporting!

@rexxars
Copy link
Contributor Author

rexxars commented Aug 30, 2021

Fantastic - thanks for the amazing work you're doing with sharp and libvips, @lovell ❤️

@lovell
Copy link
Owner

lovell commented Sep 7, 2021

v0.29.1 now available.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants