E
E
embiid2020-05-15 15:45:17
Node.js
embiid, 2020-05-15 15:45:17

How to compress an uploaded image?

I'm making my own pet project that receives an image from the user. After a person has uploaded it and he sees it, and he needs to press the "compress" button, after which the uploaded image should be compressed. I use multer to load it, and by googling I found the imagemin module.
The problem is that I don’t understand how I can transfer this image that the user has uploaded and compress it and display the result.

Post request that is processed when the user has selected a file

router.post('/upload', (request, response) => {
    upload(request, response, (error) => {
        if(error) {
            request.flash('error_message', 'Only images are allowed')
            response.redirect('/')
        }
        else {
            if(request.file == undefined) {
                request.flash('error_message', 'Image file was not been selected.')
                response.redirect('/')

                console.log(request.file)
            }
            else {
                request.flash('success_message', 'Image was uploaded successfully.')
                response.redirect(`/${request.file.filename}`);

                console.log(request.file)
            }
        }
    })
})


Here is the uploaded image:
router.get('/:filename', (request, response) => {
    let fileName = request.params.filename

    let pathToCheck = path.join(__dirname, '../public/uploads/' + fileName)
    if (fs.existsSync(pathToCheck)) {
        let imageDestination = `${request.protocol}://${request.headers.host}/uploads/${fileName}`;
        response.render('compress', {
            userImage: imageDestination
        })

        // var bitmap = imageBase64(pathToCheck);
        // const encode = RLE.Encode(bitmap)

        // Vibrant.from(pathToCheck).getPalette()
        //         .then(palette => {
        //             console.log(palette)
        //         })
    }
    else {
        response.send('Oops.')
    }
})


And after all this, when a person already sees his photo / picture, he clicks on the "compress" button, and as I understand it, the post request should work (and here I don't understand how to transfer this picture loaded):
router.post('/compress', async (request, response) => {
    const compressedImage = await imagemin(['uploads/' + request.params.filename], {
        //знаю что request.params.filename бред, но не пойму как сделать.
        destination: 'compressed',
        plugins: [
            imageminMozjpeg(),
            imageminJpegtran(),

            imageminPngquant(),
            imageminOptipng(),

            imageminGiflossy(),
            imageminGifsicle(),

            imageminSvgo(),
            imageminWebp()
        ]
    })

    request.flash('success_message', 'Image was compressed successfully. Now it is ready to be downloaded.')
    response.redirect('result')
})

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question