Meteor-files: how to resize original image?

[achtan]

Hi, is it possible to resize original image?

[dr-dimitru]

Yes, take a look on - https://github.com/VeliovGroup/Meteor-Files-Demos/blob/master/demo/server/image-processing.js

For resizing before upload read about Canvas

[achtan]

i meant to resize original image it self (so technically it wont by 'original' image any more :))
my issue is, that i dont wanna store original images on the server, so i have two options:

1. resize original image before it is actually saved
2. copy-resize original image under new version and than delete original version (is it possible to remove 'original' key from 'versions' ?

[dr-dimitru]

@achtan ,

Where is files is stored?

[achtan]

not sure what U mean... where I store my files? directly on server (no A3 or Dropbox)

[dr-dimitru]

Okay, so it's FS, right?

[achtan]

yes

[dr-dimitru]

Well, no need to involve versions.
Just trim/crop/optimize files in onAfterUpload hook. I mean update the file using gm, without creating the new one.
If size, or other meta-data is changed - update accordingly.

I hope it's clear, let me know.

[achtan]

ah ok, so i just rewrite the file, thx

[dr-dimitru]

Please, support this project by:

• Star on GitHub
• Star on Atmosphere

[achtan]

done :)

[ck88ger]

@dr-dimitru but what means use "gm" ???

[dr-dimitru]

Hello @Cagdas88 ,

gm stands for graphicsmagick:

• Website: http://www.graphicsmagick.org
• NPM adapter: https://www.npmjs.com/package/gm

[Vandell63]

Hey there,
I would like to use 'gm' but auto resize or crop to not exceed the size of 2MB per example before insert the Image.
Just let the client to make his settings. It will be alert if the size is to larger.
What can you suggest to me ?
'You specified Read about Canvas' can you suggest some link ? and how can use it with the gm !
Thx in advance

[dr-dimitru]

@Vandell63

1. Not sure how is easy to implement a tool which will not only change dimensions of the image but it's size. Take a look on imageoptim project, it's opensource.
2. You may ask a user to choose files with size less than 2MB, and check before upload, see onBeforeUpload in the README
3. Canvas is separate solution to alter image dimensions and quality, and it's Client (Browser) solution, while gm is Server only (yes there is ported javascript version of gm, with limited features, haven't tried it before, can't say for its performance)
4. Canvas Image Crop Tutorial, for more results use google
5. Image Optimization via Canvas Article, for more articles use google

Let me know if it helped you.

[Vandell63]

Yes @dr-dimitru of course it help me. 'gm' is really great but specially for the 'jpg/jpeg' file. gm not care about the png file infortunatly.
Thx for link, i know google is here, but great référence by great user will limit hours of research.
Yeah i spent lot of time to find a great solution of optimize images with Meteor easily infornatly not.
Thx for you response.
I got an little issue i think it come from the cache but its a bit strange:

    onAfterUpload(file) {
        let img = gm(file.path).quality(80);
        img.resize(1200).write(file.path, (err)=> {
            if(err){
                console.log(err);
            }
        })
    }

When the image upload and compress. 2 things happen
1 - The image taken was the 1rst uploaded it was not the compress one. So in my browser I can see my upload file at 3Mb. In Mongo all fine. In Image Upload Folder i can see the compress image at 800kb strangely. Sometimes i got a Cutting Image like if it was not ending his process.
2 - After Multiple refreshing page, The right compress image appear at the great size...
Is it a caching care ?
Maybe it because i did not update meta in Mongodb ?? so wich field to update 'meta', 'version' ?
But in few seconde after Images collection update my new compress file in mongodb.
Something that i not understand here.
Thx in advance

[dr-dimitru]

Thx for link, i know google is here, but great référence by great user will limit hours of research.

Sure, but there is not much tools to work with: gm, im thats it.
Here is gm flags we used to optimize image size in demo app.

1. Might be a result of onAfterUpload hook being asynchronous. Library finishes an upload, and ready to serve originally uploaded file. Cutting edge might be caused if you're not creating image subversion, but replacing it.
2. Always work with disabled network caching

To solve an issue you have described we are waiting for subversion to become available, see here and here

[Vandell63]

Ho my god we did it. I really never understand the link() expect that it send back the link of the original file.
so the link('compress') will point to my new compress subversion. Do I messed the link() tutorial ?
Effectively the problem was this one

<img src={avatar.link('compress')} alt="" className='full-width' />

every time it took the "link()" by default even if i specified the 'link('compress') so the strict fixed will be
<img src={avatar.versions && avatar.versions.compress && avatar.link('compress')} alt="" className='full-width' />
AHAHA React fuck you ! it is like the needed user profile data : user && user.profile && user.profile.avatar. aaaaAAAHH Now I Got You !

@dr-dimitru thx to you man, You maid an awesome work. My turn now...
I think you package is just the reference for file uploading with Meteor. So if you need support to get more React example i can help you and this community. Im not an expert but i can help some guys like me. Do you have Gitter ?

Now pdf upload oooAAARRRGG with preview any tricks ? in the Demo let's read this. ahaha
Thx man,

[dr-dimitru]

@Vandell63 great! It took time, but finally solved :)

1. My thoughts about React - https://twitter.com/smart_egg/status/871480815112392706
2. I've uploaded PDF file to our demo app, yes it have the preview
3. Here is how PDF preview is done in HTML - basically it's an iframe with source of link to the file
4. Yes, demos, examples, wikis is highly welcome!
5. Project Gitter
6. My Gitter

Please, support this project by:

• Star on GitHub
• Star on Atmosphere
• Check other packages we have made