Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kurti-vdb/ngx-smart-cropper
The ngx-smart-cropper component is an angular standalone component that allows users to upload, crop, and resize images with ease.
https://github.com/kurti-vdb/ngx-smart-cropper
angular angular19 cropper image-cropper
Last synced: about 23 hours ago
JSON representation
The ngx-smart-cropper component is an angular standalone component that allows users to upload, crop, and resize images with ease.
- Host: GitHub
- URL: https://github.com/kurti-vdb/ngx-smart-cropper
- Owner: kurti-vdb
- Created: 2024-12-06T12:55:43.000Z (7 days ago)
- Default Branch: master
- Last Pushed: 2024-12-06T13:07:24.000Z (7 days ago)
- Last Synced: 2024-12-06T14:27:07.765Z (7 days ago)
- Topics: angular, angular19, cropper, image-cropper
- Language: TypeScript
- Homepage:
- Size: 9.77 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- trackawesomelist - ngx-smart-cropper (⭐1) - Angular standalone component that allows users to upload, crop, and resize images with ease. It provides intuitive drag-and-resize functionality, grid overlays, and supports various aspect ratios and output formats. (Recently Updated / [Dec 11, 2024](/content/2024/12/11/README.md))
README
# Angular image cropper
The **ngx-smart-cropper** component is an angular standalone component that allows users to upload, crop, and resize images with ease. It provides intuitive drag-and-resize functionality, grid overlays, and supports various aspect ratios and output formats.
## Features
- Upload and preview images.
- Intuitive drag-to-crop and resize handles.
- Emits cropped images as `base64` data.
- Responsive design and easy-to-integrate.
- Auto theme detection: Automatically detects the theme (light or dark) based on the image content.
## Installation
### 1. Install via npm
```bash
npm install ngx-smart-cropper --save
```
## Usage
### 1. Import and use the component
```html
![]()
```
### 2. Include the component in your Angular component
```typescript
import { ImageCropperComponent } from 'ngx-smart-cropper';
@Component({
standalone: true,
imports: [ImageCropperComponent],
...
})
export class MyComponent {
croppedImage = '';
imageSource: string | null = null;
onFileChange(event: Event): void {
const input = event.target as HTMLInputElement;
if (!input.files || input.files.length === 0) return;
const file = input.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e: any) => {
this.imageSource = e.target.result;
};
reader.readAsDataURL(file);
}
}
imageCropped(event: any) {
this.croppedImage = event;
}
}
```
## API
### Inputs
| Input | Type | Default | Description |
|---------------------|-------------------------|---------|----------------------------------------------------------|
| `cropX` | `number` | `50` | Initial crop area x-coordinate. |
| `cropY` | `number` | `50` | Initial crop area y-coordinate. |
| `cropWidth` | `number` | `150` | Initial crop width. |
| `cropHeight` | `number` | `150` | Initial crop height. |
| `imageType` | `'png' \| 'jpeg' \| 'avif' \| 'webp' ` | `'webp'` | File type for the cropped image. |
| `theme` | `'light' \| 'dark' \| 'mixed' \| 'auto'` | `'auto'` | The theme property automatically adjusts the UI theme between light and dark modes based on the image content. When set to 'auto', it detects the proportion of white pixels in the image and switches to a dark theme if the image contains a high percentage of light pixels, ensuring optimal visibility and contrast. |
| `whitePixelThreshold` | `number` | `20` | Threshold number for switching between dark and light mode when theme is set to auto. |
### Outputs
| Output | Type | Description |
|----------------------|----------------------|-------------------------------------------------|
| `imageCroppedEvent` | `EventEmitter` | Emits the cropped image data as a base64 string. |
## License
MIT License. See `LICENSE` for details.
## Icons
This project uses beautiful, customizable, and free [Tabler Icons](https://tabler.io/icons) for its interface elements. Tabler Icons offer a wide range of icons with clean and modern designs, perfect for enhancing UI/UX in any application. Visit their website to explore more.
## Feedback and contributions
Feel free to open issues or contribute enhancements on [GitHub](https://github.com/kurti-vdb/ngx-smart-cropper).
## Demo page
Demo