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

resize fit 'contain' works like 'inside' on sharp ≥ 0.28 #2951

Closed
deyhle opened this issue Oct 27, 2021 · 3 comments
Closed

resize fit 'contain' works like 'inside' on sharp ≥ 0.28 #2951

deyhle opened this issue Oct 27, 2021 · 3 comments

Comments

@deyhle
Copy link

deyhle commented Oct 27, 2021

When resizing a very lengthy image to a square using fit: 'contain' to place it resized in the square, it is instead behaving like fit: 'inside' and not respecting the requested output size in one dimension.

Reproducable in sharp 0.29.2. It definitely worked as expected in 0.27.0.

What are the steps to reproduce?

  • resize a JPEG image to a square with a size in-between the largest and the smallest edge of the original image, using fit: 'contain' (Example: input file 1px width, 850px height, resize to 100x100) -> Result image has 100px height, but only 1px width and no letterboxing occurred as expected

What is the expected behaviour?

  • Result image should respect 'contain' behavior, and be letterboxed to match the target width and height.

Are you able to provide a minimal, standalone code sample, without other dependencies, that demonstrates this problem?

const sharp = require('sharp');
const assert = require('assert');

/**
 * input file is a jpg with 1px x 850px
 * expected output is a jpg with 100px x 100px
 */
const INPUT = './1px.jpg';
const OUTPUT = './1px-thumb.jpg';

(async () => {
  const image = await sharp(INPUT);
  const metaInput = await sharp(INPUT).metadata();
  assert.strictEqual(metaInput.height, 850, 'input height is 850px');
  assert.strictEqual(metaInput.width, 1, 'input width is 1px');
  image.resize(100, 100, {
    fit: 'contain',
    background: { r: 255, g: 255, b: 255, alpha: 1 },
  });
  image.jpeg({
    quality: 85,
    chromaSubsampling: '4:2:0',
    progressive: true,
  });
  await image.toFile(OUTPUT);
  const metaOutput = await sharp(OUTPUT).metadata();
  assert.strictEqual(metaOutput.height, 100, 'output height is 100px');
  assert.strictEqual(metaOutput.width, 100, 'output width is 100px');
})();

Error:

AssertionError [ERR_ASSERTION]: output width is 100px
    at ...:27:10 {
  generatedMessage: false,
  code: 'ERR_ASSERTION',
  actual: 1,
  expected: 100,
  operator: 'strictEqual'
}

Are you able to provide a sample image that helps explain the problem?

https://user-images.githubusercontent.com/770621/139036263-ad9d9d1d-b19c-45ac-b99b-22d93c4b5755.jpg
(barely visible, because it is only 1px wide:)

1px

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

  System:
    OS: macOS 12.0.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 253.30 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.12.0 - ~/.nvm/versions/node/v16.12.0/bin/node
    npm: 8.1.0 - ~/.nvm/versions/node/v16.12.0/bin/npm

also happens on the CI server with

 System:
    OS: Linux 5.4 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-3770 CPU @ 3.40GHz
    Memory: 6.55 GB / 31.07 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
    npm: 6.14.12 - ~/.nvm/versions/node/v14.16.1/bin/npm
@deyhle deyhle added the triage label Oct 27, 2021
@lovell lovell added this to the v0.29.3 milestone Nov 7, 2021
@lovell
Copy link
Owner

lovell commented Nov 7, 2021

Thanks for reporting this, commit b33231d adds a fix as well as tests that would previously have failed.

@lovell
Copy link
Owner

lovell commented Nov 14, 2021

v0.29.3 now available.

@lovell lovell closed this as completed Nov 14, 2021
@deyhle
Copy link
Author

deyhle commented Nov 15, 2021

Great, thank you very much for the quick fix!

martinj pushed a commit to aptoma/sharp that referenced this issue Mar 31, 2022
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