I made a bulk image cropper with cropperjs!

[danfickle]

Links

• Online demo of bulk image cropper
• Source code (MIT License)

What I made

I made a mass image cropper that makes use of cropperjs. Users start by uploading multiple images (or use sample images) and selecting a desired size or aspect ratio. Then they select a crop mask for each image using cropperjs. Finally, the cropped images are zipped (in-browser) and can be downloaded.

Who is it for

The program (which can easily be deployed on any web server) is designed for people who need to create a group of images with the same size or aspect ratio. Typical examples include carousels, sliders, galleries, etc. I imagine web agencies and developers could refer it to their clients when they have such a requirement.

Challenges

• I couldn't find a zip library (I've since seen some that look promising) that I was happy with, so uncompressed zip (the images are already compressed) being a relatively simple file format to write out, I made my own. It uses typed arrays in a web worker.
• The UI is built using Vue 2. Originally it was going to be jQuery only, but even with the uncomplicated state of the program, it quickly became spaghetti code.
• Design! Even with the use of uikit, it still looks pretty average.
• The cropperjs library was a delight to work with so thank you!

Feedback

I'm posting this here in the hope that someone might find it of use. Feel free to provide feedback or constructive criticism via this discussion or issues on the repository. Even better, fork the code and see what you can do with it. I'd love to see what someone with some design skills could do with the UI!

Thanks,
@danfickle.