Today, I’m releasing a framework-agnostic, in-browser image cropper. The motivation is that I need this on a regular basis in multiple projects, across multiple frameworks and – while I’m aware of existing tools like Cropper.js and others – quite frankly, to me they seem too complex to setup especially depending on the front-end framework I’m dealing with. I needed this problem reduced to a simple JS call.
The result is packaged as the GCAS-Image toolkit. It’s meant to be a collection (eventually) of straightforward, TypeScript-based tools for editing images directly in the browser wiht as little fuss as possible. Currently, only the Crop tool is present, hopefully others will be added in the same spirit.
Quick links
See the Git repository, NPM package and the demo.
The requirements
- be lightweight (barely noticeable) preferably as just one single file, any needed CSS rules included and must work both in browser (CommonJS) and as ES module.
- simply overlay on any image in the DOM, without hiding or altering it in any way and also follow that image regardless of any layout changes;
- use ShadowDOM to prevent altering existing styles but not web-components, because these imply that some non-trivial setup is required to make them work with whatever project you’re working on;
- activate with a single call regardless of UI framework used (React, Svelte etc.) and don’t ask me to do any setup or install any dependencies;
- allow me to customize styles but don’t overengineer what should essentially be just a simple… crop!
Documentation
For now (due to limited time) please see the demo HTML code as well as the source comments to understand the usage. Should not be too difficult (just look at the options and public methods). Hopefully soon, I’ll find the time to elaborate this into a full documentation (perhaps in the GitLab wiki).
Hope you’ll find this useful!
If so, share a comment below or report a bug.
Enjoy!