https://github.com/spiral-modules/cropper
Image cropper virtual tag for spiral forms (dark templates)
https://github.com/spiral-modules/cropper
Last synced: 5 months ago
JSON representation
Image cropper virtual tag for spiral forms (dark templates)
- Host: GitHub
- URL: https://github.com/spiral-modules/cropper
- Owner: spiral-modules
- License: mit
- Created: 2016-01-04T14:22:44.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-03-03T09:40:56.000Z (over 10 years ago)
- Last Synced: 2023-08-05T00:05:31.921Z (almost 3 years ago)
- Language: JavaScript
- Homepage:
- Size: 511 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Image Cropper Widget
Module provides ability to crop user image on client side and send to backend as file stream over ajax call.
## Usage Example
At frontend (dark template required), simply add virtual tag to your form:
```html
...
```
The code above will be transformed into html and will add required javascript. Result html:
```html
Image Cropper
Choose a file...
```
Backend:
```php
public function uploadAction()
{
$image = $this->input->file('image');
//...
}
```
Cropper preview:
## Options
* **wrapper-class** - pass a class to wrapper
* **label** - file-input label
* **label-class** - pass a class to file-input label
* **placeholder** - text to pass to filename-container
* **placeholder-class** - pass a class to filename-container
* **data-format** - how to send data: cropped or full size with coordinates to crop on server *Default: "cropped" Optional: "full"*
* **data-ajax-image** - preloading of image through ajax request *Default: "false" Optional: url of image to preload*
* **data-template** - pass custom html template of cropper
* **data-ajax-address** - request address for submitting (if there is no form) *Default: "false" Optional: request URL*
* **data-ratio** - locked aspect ratio *Default: false*
* **data-filename-selector** - node selector to place filename. If starts with space - global search of node (document) otherwise inside the node (if the node is input, then from parent node)
* **data-info** - what info to show *Default: [] Example: data-info="ratio,origSize,croppedSize"*
* **data-preview** - selector of preview element *Default: ""*
* **data-save-btn-text** - save button text *Default: "Save"*
* **data-close-btn-text** - save button text *Default: "Close"*
* **data-custom-btn-class** - pass custom class to btns *Default: ""*
* **data-adjust** - selector of element which triggers crop-modal *Default: ""* If starts with space - global search of node (document) otherwise inside the node (if the node is input, then from parent node)
## Installation
`composer require spiral/cropper`
`spiral register spiral/cropper`
## Update
`composer update spiral/cropper`
`spiral publish spiral/cropper`
## License
Copyright (c) 2016 Alex Chepura, Yauheni Yasinau and contributors. Released under an [MIT license](https://github.com/spiral-modules/image-cropper/blob/master/LICENSE).