https://github.com/devshahrukhanwar/croppy-library
It is a wrapper around croppie js library built on top of vanilla javascript. Easy to use and fast to implement. Implement the crop on images and preview them just in 3-5 lines of code. It takes care of everything neccesary for implementing a basic crop functionality.Most of the things are customisable and totally flexible as in the original plugin
https://github.com/devshahrukhanwar/croppy-library
cropper croppiejs javascript jquery side-project
Last synced: 2 months ago
JSON representation
It is a wrapper around croppie js library built on top of vanilla javascript. Easy to use and fast to implement. Implement the crop on images and preview them just in 3-5 lines of code. It takes care of everything neccesary for implementing a basic crop functionality.Most of the things are customisable and totally flexible as in the original plugin
- Host: GitHub
- URL: https://github.com/devshahrukhanwar/croppy-library
- Owner: devshahrukhanwar
- License: mit
- Created: 2021-09-16T13:27:49.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2025-07-04T14:18:31.000Z (6 months ago)
- Last Synced: 2025-08-08T02:40:17.625Z (5 months ago)
- Topics: cropper, croppiejs, javascript, jquery, side-project
- Language: JavaScript
- Homepage: https://croppy-library.vercel.app
- Size: 65.4 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 Croppie Library
It is a wrapper around [croppie](https://foliotek.github.io/Croppie/) js library built on top of vanilla javascript. Easy to use and fast to implement. Implement the crop on images and preview them just in 3-5 lines of code. No muss no fuss. We take care of everything necessary for implementing a basic crop library.
Most of the things are customisable and totally flexible as in the original library written by **foliotek**.
---
# 🏗️ Steps to use
- Download the source code via HTTPS or clone it to your local and place the `crop.js` and `crop.css` files as per your project hierarchy of public JS and CSS files.
```
```
- Instantiate the object as follows just in three basic line of codes.
```
let crop = new ImageCrop({
crop : true, //Optional (Default: true)
showPreview: true, //Optional (Default: false)
imagePreview : '.image_preview',
//Required if want to show crop image preview (This is id/class of div which must contain ![]()
tag)
});
```
- Now place event listener for the image change (i.e. when user select an image)
```
//On clicking on image select
document.getElementById('YOUR_INPUT_FILE_ID').addEventListener('change', function(){
crop.initCrop(this);
});
```
- Now place the code for after clicking the crop button
```
//On clicking on crop
document.getElementById('crop_image').addEventListener('click', function(){
console.log(crop.getData()); //getData() gives the cropped image data
});
```
- Wollaa... the crop for image is now implemented and you can test it now.
---
# 🧩 Examples
- There are three examples given with this library (i.e. [index.html](index.html), [examples/blog.html](examples/blog.html), [examples/album.html](examples/album.html))
- Please take the reference from examples to extend the library as per your needs.
---
# 📝 Note
This is not a full fletched library, it is simple to implement and customisable. You can customise as per the examples given by us and even provide your `crop modal` HTML to the `ImageCrop` instance.
---
## 🤝 Contact
- 📧 Email: [shahrukhanwar@proton.me](mailto:shahrukhanwar@proton.me)
- 🌐 Portfolio: [shahrukhanwar.vercel.app](https://shahrukhanwar.vercel.app)
- 💼 LinkedIn: [linkedin.com/in/devshahrukh](https://www.linkedin.com/in/devshahrukh)
- 🐦 Twitter: [x.com/devshahrukh](https://x.com/devshahrukh)
---
## 📄 License
This project is open source and available under the [MIT License](LICENSE).
---
## 💖 Sponsor & Support
If you find this project useful, consider supporting me:
