https://github.com/danfickle/bulk-image-cropper

An in-browser HTML5 batch image cropping tool that uses a custom crop mask for each image
https://github.com/danfickle/bulk-image-cropper

bulk-image-cropper cropperjs cropping-images cropping-masks resizing-images

Last synced: 8 days ago
JSON representation

An in-browser HTML5 batch image cropping tool that uses a custom crop mask for each image

• Host: GitHub
• URL: https://github.com/danfickle/bulk-image-cropper
• Owner: danfickle
• Created: 2020-10-11T07:23:30.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2021-05-03T12:03:42.000Z (over 3 years ago)
• Last Synced: 2024-11-08T15:53:18.545Z (2 months ago)
• Topics: bulk-image-cropper, cropperjs, cropping-images, cropping-masks, resizing-images
• Language: HTML
• Homepage:
• Size: 18.6 KB
• Stars: 13
• Watchers: 4
• Forks: 10
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Try it online!

[Online bulk image cropper](https://www.catalog.guru/raw/image-cropping-tool.html)

## What is this?

This is an in-browser HTML5 mass image cropping tool.

The user loads a list of image and provides a desired size or aspect ratio.

They are then shown the images one by one with a cropping mask which may be changed.

When they are finished customizing the cropping masks they create and download a zip with the cropped and optionally resized images.

## Deployment

+ Copy both `image-cropping-tool.html` and `zip-web-worker.js` to a web server. Due to browser security limits it will not run as a local file.

+ Optionally, open `image-cropping-tool.html` in a text editor and search for `TODO` to make any changes you require. For example, you could add some sample images.

## License

MIT license, although I would appreciate a link back to this repository:

https://github.com/danfickle/bulk-image-cropper

## Dependencies

+ The main work of customizing the cropping masks and cropping/resizing images is done by the excellent [cropper.js](https://github.com/fengyuanchen/cropperjs).

+ The UI is styled with [UI-kit](https://getuikit.com/).

+ UI functionality is provided by [Vue.js version 2](https://vuejs.org/).

+ Additionally jQuery is used.