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

crop behavior request #86

Open
ccckblaze opened this issue Oct 30, 2019 · 6 comments
Open

crop behavior request #86

ccckblaze opened this issue Oct 30, 2019 · 6 comments
Labels
enhancement New feature or request

Comments

@ccckblaze
Copy link

ccckblaze commented Oct 30, 2019

i'd like the old flavor of crgen, the image crop which just based on the px, not resize the original image

so i did a patch for current version

const transformSplash = (definition) => {
const image = imageObj.splash;
const { width } = definition;
const { height } = definition;
const outputFilePath = path.join(platformPath, definition.name);
const outDir = path.dirname(outputFilePath);
return fs.ensureDir(outDir).then(() => image
.extract({left: parseInt((image.meta.width - width) / 2), top: parseInt((image.meta.height - height) / 2) , width, height})
.toFile(outputFilePath));
};``

.extract({left: parseInt((image.meta.width - width) / 2), top: parseInt((image.meta.height - height) / 2) , width, height})

instead of

.crop(sharp.strategy.entropy)

can you give a build-in command line switch for this

like
irgen --extract
or something else

please ^ ^

@ccckblaze
Copy link
Author

@sebinbenjamin
can you help me out, please

@sebinbenjamin
Copy link
Owner

sebinbenjamin commented Nov 14, 2019

Sure. Please get me a screenshot/image of the expected behavior, to make sure I understand you correctly.

@sebinbenjamin
Copy link
Owner

sebinbenjamin commented Nov 14, 2019

i'd like the old flavor of crgen, the image crop which just based on the px, not resize the original image

so i did a patch for current version

const transformSplash = (definition) => {
const image = imageObj.splash;
const { width } = definition;
const { height } = definition;
const outputFilePath = path.join(platformPath, definition.name);
const outDir = path.dirname(outputFilePath);
return fs.ensureDir(outDir).then(() => image
.extract({left: parseInt((image.meta.width - width) / 2), top: parseInt((image.meta.height - height) / 2) , width, height})
.toFile(outputFilePath));
};``

.extract({left: parseInt((image.meta.width - width) / 2), top: parseInt((image.meta.height - height) / 2) , width, height})

instead of

.crop(sharp.strategy.entropy)

can you give a build-in command line switch for this

like
irgen --extract
or something else

please ^ ^

.crop(sharp.strategy.entropy) was changed to image.resize({ width, height, position: 'centre' }) some time ago. Please let me know if your issue is fixed.

@ccckblaze
Copy link
Author

my bad... i installed from npm version 0.62, it seems an old deprecated version, now it works perfectly!
thanks @sebinbenjamin , when will you tag this version and upload to npm?

@ccckblaze
Copy link
Author

the image now crops centre, but there is still a problem, irgen works different from crgen, i want it "crop" not "resized"

base splash
image

now
image

hoped
image

so the image will not lose detail

@sebinbenjamin sebinbenjamin self-assigned this Nov 16, 2019
@sebinbenjamin
Copy link
Owner

sebinbenjamin commented May 19, 2020

I'm working on a solution, although you should try to use a proper splash base to start with. Ideally, the splash screen's artwork should roughly fit/cover a square (1200×1200px out of 2732x2732px) at the centre of the image. You can use this template provided by the Ionic team.

Make sure that the logo fits in the orange square at the centre. A minimum content size covering at least half of the orange square makes sure that the output splash does not lose much detail.

splash

@sebinbenjamin sebinbenjamin removed their assignment May 19, 2020
@sebinbenjamin sebinbenjamin added the enhancement New feature or request label May 21, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants