search

jamdotdev / jam-dev-utilities

Lightweight utils set - fast and open-source. It's got cmd+k search & everything's client-side. No ads, your data stays local.
https://jam.dev/utilities
GNU General Public License v3.0
193 stars 19 forks source link

[Feat] - Image Resizer #48

Closed EduardoDePatta closed 1 week ago

EduardoDePatta commented 1 month ago

Hello again!

This PR introduces a new Image Resizer page that allows users to resize images in PNG, JPEG, and SVG formats. Supports aspect ratio maintenance, and quality adjustments(jpeg).

Key Changes

  1. Utility Functions:

    • Added resizeImage, processImageFile, updateWidth, and updateHeight functions to handle image resizing and dimension adjustments.

  2. New Component:

    • Implemented the ImageResize component, which lets users upload, resize, and download images.

  3. Test Suite:

    • Added tests to ensure correct functionality, especially for aspect ratio and format handling.

  4. Updated Tools List:

    • New tool accessible from the main tools page.

  5. Documentation update:

    • The README file was updated to include the new tool in the list of available utilities, with a direct link.

Benefits

  1. Efficiency: Simplifies image resizing for web development and content creation.
  2. Performance: Helps reduce image file sizes, improving load times.
  3. Compatibility: Ensures images are optimized for different devices.

OBS: canvas in devDependencies

1. Added canvas to devDependencies to simulate the canvas API in Node.js during testing.
2. If canvas is removed, related tests must also be removed.

I also considered adding the functionality to crop images, but since this PR is already QUITE LARGE due to the extensive test file, the addition of dependencies, and the refactoring of the image upload component to make it reusable, SEO component, etc, I decided to leave that as a separate task, should this one be approved.

peckz commented 3 weeks ago

Thank you @EduardoDePatta, I'm on vacation until 9th September, after that I'm going to have a look!

peckz commented 1 week ago

@EduardoDePatta This looks very solid! I tweaked structure to be more aligned with other tools in latest commit. Also, I added max height for preview image since it can happen that users upload vertical screenshot (from mobile)

I left few minor comments for you to address.

This is the preview of updated UI / structure:

image

peckz commented 1 week ago

@EduardoDePatta I also noticed that tests are failing for Image resizer

FAIL components/utils/resize-image.utils.test.ts (10.528 s)

EduardoDePatta commented 1 week ago

@EduardoDePatta I also noticed that tests are failing for Image resizer

FAIL components/utils/resize-image.utils.test.ts (10.528 s)

@peckz the test likely failed because the canvas package is not installed as a dev dependency. Since jsdom doesn't fully support .toDataUrl, the canvas package is required to simulate this behaviour in a node.js environment using jest. Installing the necessary dependencies should resolve the issue.

Aside from that, all the other corrections have already been made!

peckz commented 1 week ago

@EduardoDePatta Thanks for resolving conflicts! I'm having issues with npm install. I've run into this before with node-canvas package.

From their repo:

Compiling If you don't have a supported OS or processor architecture, or you use --build-from-source, the module will be compiled on your system. This requires several dependencies, including Cairo and Pango.

For detailed installation information, see the wiki. One-line installation instructions for common OSes are below. Note that libgif/giflib, librsvg and libjpeg are optional and only required if you need GIF, SVG and JPEG support, respectively. Cairo v1.10.0 or later is required.

I might need to update README.md with additional steps.

Which OS are you using Windows, Linux, Mac? Are you using node 20.9.0

EduardoDePatta commented 1 week ago

@peckz I tested it on both Ubuntu 22.04.3 and Windows 10, without npm cache and with node 20.9.0 and everything worked fine! I wasn't able to reproduce the issue you reported. If it's possible to identify where the problem occours, we could create a postinstall script with uname or something similar to add the necessary dependencies for specific environments.

peckz commented 1 week ago

@EduardoDePatta Thanks for info! I think in general, the problem is with MacOS and arm architecture. Our pipeline is running npm install successfully on linux-x64 node-20.9.0-linux-x64.tar.gz

Those libs are necessary to install on MacOS:

brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman python-setuptools

I'm going to merge this and update README.md

Thank you for the contribution!