download image from temp bucket, split into 3 sizes, and reupload to app bucket

processImage.crud.ts

processImage(params) {
        console.log('imageProcess.processImage params: ', JSON.stringify(params));
        let key = params.key;
        let imageData;
        let bucketForUpload = 'app-' + serverConf.nodeEnv;
        if(key){
            var sizes = [50, 200, 800];
            const storage = new AWS.S3();
            var fn = function process(size) {
                return new Promise(function (resolve, reject) {
                    var width = size;
                    var height = size;
                    gm(imageData)
                        .setFormat('jpg')
                        .antialias(true)
                        .density(300)
                        .resize(width, height)
                        .stream(function (err, stdout, stderr) {
                            var data = {
                                Bucket: bucketForUpload,
                                Key: key.split('.')[0] + '_' + size + '.jpg',
                                Body: stdout,
                                ACL: 'public-read'
                            };
                            storage.upload(data, function(err, res) {
                                if(err){
                                    return reject(err);
                                }else{
                                    return resolve(res);
                                }
                            });
                        })
                })
            };
            return new Promise(function (resolve, reject) {
                storage.getObject({
                    Bucket: s3Config.bucket,
                    Key: key
                }, function(err, res){
                    if(err){return reject(err)}
                    resolve(res)
                })
            }).then((res: any) => {
                imageData = res.Body;
                var actions = sizes.map(fn);
                var results = Promise.all(actions);
                return new Promise(function(resolve, reject){
                    results.then(data => {
                        console.log('graphics magick date = '+ JSON.stringify(data));
                        resolve(data);
                    })
                })
            });
        }
}

@lukasasorensen I was wondering whether I could see the whole file:

processImage.crud.ts

https://gist.github.com/lukasasorensen/fdf1b63a614e03fa94dc826d920ad5a1

I cannot get GraphicMagick to import correctly. I keep getting an error when I try and build my Angular 8 Electron app.
I really want to learn how to get GraphicMagick working inside Angular!

@charlesr1971 GraphicsMagick cannot run in your browser. GraphicsMagick is written in the C programming language so it has to be executed server side. you will need to set up an api that communicates with your angular app that you send the image to your server and use a NODEJS graphicsmagick wrapper like: https://github.com/aheckmann/gm .

here is a video explaining clients & servers. https://www.youtube.com/watch?v=qSAze9b0wrY it's really just the tip of the iceberg, but you'll need to understand how they work and how they communicate before you attempt something like graphicsmagick

@lukasasorensen Thank you for all this amazing information.

I thought if I was using Electron, I might be able to use the in built NodeJs server to run GM?

@charles1971 no problem mate. I'm not too familiar with Electron so I'm not too sure about it's ability to run something like GM, but I do know that it's just Chromium under the hood. I would search around google for something like "can I run server side nodejs on electron?"

@lukasasorensen I think the answer maybe yes:

https://stackoverflow.com/questions/35819200/nodejs-electron-confusion-about-client-server-code

But, it is still not 100% clear. I know that Electron can definitely access the client’s file system.

@charles1971 it seems that you are right, you can do this. https://stackoverflow.com/questions/45039779/how-to-install-imagemagick-inside-of-electron-app -- note: graphicsmagick is just a fork of imagemagick

@lukasasorensen Yes. But it looks pretty complicated:

https://github.com/joeherold/imagemagick-darwin-static

https://github.com/SamirL/graphicsmagick-static

Other:

https://stackoverflow.com/questions/51431188/how-do-you-install-and-bundle-graphicsmagick-in-an-electron-app

The problem is, I don’t know where I would write the code for the first two links above. The imagemagick-darwin-static doesn’t say where I should write this code. I am writing the app in TypeScript. I have dropped the Angular option, because it was preventing IPC calls from working properly.

I have an app.js which opens the Chromium and then I have a service inside src/app, which sets up the IPC messaging system.

I guess I should put the GraphicksMagick stuff in the app.js?