webiny / webiny-js

Open-source serverless enterprise CMS. Includes a headless CMS, page builder, form builder, and file manager. Easy to customize and expand. Deploys to AWS.
https://www.webiny.com
Other
7.34k stars 603 forks source link

Sharp png compression is not working inside webiny package #2318

Open sunnythelucky opened 2 years ago

sunnythelucky commented 2 years ago

Version

5.25.0

Operating System

OS

Browser

Chrome

What steps will reproduce the bug?

We modified compressionLevel in optimizeImage.ts and transformImage.ts from ./node_modules/@webiny/api-file-manager/handlers/transform and then use patch command to update @webiny package in node_module. But the png image is not being compressed as we expected. So we tested it with a separate script using exact same version of sharp and see if the compression makes any issue that turned out to be not happening. What we want to do is to compress Image after resizing.

What is the expected behavior?

compress png => resize => compress png

What do you see instead?

.png({compressionLevel: 9}) is not working properly instead when we run .toFormat("jpeg",{ quality : 50}) on png, it works just fine

Additional information

No response

Possible solution

No response

sunnythelucky commented 2 years ago

optimizeImage.js

var _default = async (buffer, type) => {
    switch (type) {
        case "image/png": {
            return await (0, _sharp.default)(buffer)
                .png({
                    compressionLevel: 9,
                    quality: 50,
                    force: true
                })
                .toBuffer();
        }

        case "image/jpeg":
        case "image/jpg": {
            return await (0, _sharp.default)(buffer)
                .toFormat("jpeg", {
                    compressionLevel: 9,
                    quality: 50
                })
                .toBuffer();
        }

        default:
            return buffer;
    }
};

transformImage.js

var _default = async (buffer, type, transformations) => {
    const { width } = transformations;
    switch (type) {
        case "image/png": {
            return await (0, _sharp.default)(buffer)
                .resize({
                    width
                })
                .toFormat("jpeg", {
                    quality: 50
                })
                .toBuffer();
        }

        case "image/jpeg":
        case "image/jpg": {
            console.log(type);
            console.log(transformations);
            return await (0, _sharp.default)(buffer)
                .toFormat("jpeg", {
                    compressionLevel: 9,
                    quality: 50
                })
                .resize({
                    width
                })
                .toBuffer();
        }

        default:
            return buffer;
    }
};