CODEWITHSUNDEEP
javascriptnode.jsmeteorgraphicsmagick
Jared Martin
Jared Martin

Reputation: 653

How to create a thumbnail that fills a certain area in meteor with CollectionFS and graphicsmagick

Right now I'm using the code here: https://github.com/CollectionFS/Meteor-CollectionFS#basic-example Suppose I want a thumbnail 100x100.

But say my image is 400x200, the code above will produce a thumbnail 100x50.

What I want to happen in this example is for the image to be resized to 200x100, and then clipped to 100x100. How do I do that? How can I get the height and width? I know I can use gm's size function, but I can't wrap my head around all the callbacks.

Upvotes: 4

Views: 1059

Answers (1)

evolross
evolross

Reputation: 533

Try:

gm(readStream, fileObj.name()).autoOrient().resize('100', '100', "^").gravity('Center').extent('100', '100').stream().pipe(writeStream);

The autoOrient() will automatically turn any mobile-phone photos to the correct direction (otherwise they sometimes come in sideways). The ^ that gets passed to resize is an option that makes the "smallest edge" of your image resize to 100. So this will leave an "overhang" on the "correct" edge. It takes care of your image being really wide or really tall. The extant then crops your image removing the overhang. The gravity('Center') makes the cropping effect of extant occur at the center of the image.

The only the thing I still haven't figured out is how to crop from the center of the image. According to most examples, calling gravity('center') should do this, but it's not working for me. It always crops from the corner. It's working, it just doesn't look the best as most subject matter is in the center of an image.

EDIT: The gravity call needs 'Center' to work, not 'center'. The call now works as intended. Also added autoOrient() call.

Here's the official gm doc explaining the options. But it took researching how to do this in gm for node.js to figure the above syntax.

Upvotes: 6

Related Questions