Implementing a reusable image picker for the web

For various projects I need to implement a client-side upload of image files. To improve the user experience, I want to allow users to crop their chosen image directly after selecting it in the browser.

Technologies

The picker should stay independent from the technology used by the project that integrates it and use native features where possible. I consider the following options for implementing the component:

- Native web components

- Web components using a framework like Lit

- Library component using a framework like Vue

- Plain HTML, CSS and JavaScript files, optionally with lightweight frameworks like Alpine.js

Furthermore, I want to minimize the complexity of the build and deployment process.

Features

The picker allows users to select an image file and move it within a given rectangular area.

After confirmation, the cropped image can be retrieved.

Customization

The picker will provide limited options for customization:

- It supports an option to specify the desired aspect ratio

References

https://labex.io/tutorials/css-build-an-image-cropping-tool-using-html5-298929

https://foliotek.github.io/Croppie/