There are plenty of excellent libraries for cropping and processing images. But I kept running into the same problem: every project needed the same surrounding code — file uploads, clipboard paste, controls, UI state, getting the result, and passing it back to the application.
So I built MagicImage — a Vue 3 component that wraps this whole browser-side workflow into one place. Think of it as a Swiss Army knife for working with images.
It accepts an image from a file or the clipboard, lets the user crop and adjust it, and returns two files:
📄 the original image
🖼️ the processed image in the selected format
MagicImage knows nothing about your backend. It emits the result through a save event, and the application decides what happens next.
It’s not meant to replace specialised image-processing libraries. The goal is simply to package the repetitive browser-side workflow into one reusable component.
I’d be interested in feedback, especially from Vue developers who’ve had to build this kind of UI more than once.
Top comments (0)