library cropper {🖫 474, ⚐ 24, ★ 2}

spiral/cropper

Image Cropper Widget

Thursday, March 3, 2016
by wolfy-j
Repository
3 Watchers
2 Stars
474 Installations

JavaScript
0 Dependents
0 Suggesters
0 Forks
1 Open issues
24 Versions
0 % Grown

The README.md

Module provides ability to crop user image on client side and send to backend as file stream over ajax call., _(*1)

Usage Example

At frontend (dark template required), simply add virtual tag to your form:, _(*2)

<dark:use bundle="spiral:cropper-bundle"/>
...
<form.cropper label="Image Cropper" name="image" data-preview="#cropper-preview"/>

The code above will be transformed into html and will add required javascript. Result html:, _(*3)

<label class="item-form item-file">
    <span class="item-label">Image Cropper</span>
    <input type="file" class="item-input js-sf-cropper" data-filename-selector=".sf-crop-filename" data-name="image"
           context="" data-preview="#cropper-preview">
    <span class="sf-crop-filename btn">Choose a file...</span>
</label>

Backend:, _(*4)

public function uploadAction()
{
    $image = $this->input->file('image');
    //...
}

Cropper preview:, _(*5)

cropper-preview , _(*6)

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, _(*7)

Update

composer update spiral/cropper
spiral publish spiral/cropper, _(*8)

License

The Versions

03/03 2016

dev-master

9999999-dev

Image Cropper Widget

Sources Download

MIT

The Requires

by Alex Chepura

03/03 2016

v0.4.21

0.4.21.0

Image Cropper Widget

Sources Download

MIT

The Requires

by Alex Chepura

08/02 2016

v0.4.20

0.4.20.0

Image Cropper Widget

Sources Download

MIT

The Requires

by Alex Chepura

27/01 2016

v0.4.19

0.4.19.0

Image Cropper Widget

Sources Download

MIT

The Requires

by Alex Chepura

27/01 2016

dev-photo-edit-tools

Image Cropper Widget

Sources Download

MIT

The Requires

by Alex Chepura

27/01 2016

v0.4.18

0.4.18.0

Image Cropper Widget

Sources Download

MIT

The Requires

by Alex Chepura

27/01 2016

v0.4.17

0.4.17.0

Image Cropper Widget

Sources Download

MIT

The Requires

by Alex Chepura

26/01 2016

v0.4.16

0.4.16.0

Image Cropper Widget

Sources Download

MIT

The Requires

by Alex Chepura

26/01 2016

v0.4.15

0.4.15.0

Image Cropper Widget

Sources Download

MIT

The Requires

by Alex Chepura

25/01 2016

v0.4.14

0.4.14.0

Image Cropper Widget

Sources Download

MIT

The Requires

by Alex Chepura

25/01 2016

v0.4.13

0.4.13.0

Image Cropper Widget

Sources Download

MIT

The Requires

by Alex Chepura

25/01 2016

v0.4.12

0.4.12.0

Image Cropper Widget

Sources Download

MIT

The Requires

by Alex Chepura

25/01 2016

v0.4.11

0.4.11.0

Image Cropper Widget

Sources Download

MIT

The Requires

by Alex Chepura

22/01 2016

v0.4.10

0.4.10.0

Image Cropper Widget

Sources Download

MIT

The Requires

by Alex Chepura

22/01 2016

v0.4.9

0.4.9.0

Image Cropper Widget

Sources Download

MIT

The Requires

by Alex Chepura

22/01 2016

v0.4.8

0.4.8.0

Image Cropper Widget

Sources Download

MIT

The Requires

by Alex Chepura

22/01 2016

v0.4.7

0.4.7.0

Image Cropper Widget

Sources Download

MIT

The Requires

by Alex Chepura

22/01 2016

v0.4.6

0.4.6.0

Image Cropper Widget

Sources Download

MIT

The Requires

by Alex Chepura

22/01 2016

v0.4.5

0.4.5.0

Image Cropper Widget

Sources Download

MIT

The Requires

by Alex Chepura

21/01 2016

v0.4.4.1

0.4.4.1

Image Cropper Widget

Sources Download

MIT

The Requires

by Alex Chepura

21/01 2016

v0.4.4

0.4.4.0

Image Cropper Widget

Sources Download

MIT

The Requires

by Alex Chepura

20/01 2016

v0.4.3

0.4.3.0

Image Cropper Widget

Sources Download

MIT

The Requires

by Alex Chepura

20/01 2016

v0.4.2

0.4.2.0

Image Cropper Widget

Sources Download

MIT

The Requires

by Alex Chepura

20/01 2016

v0.4.1

0.4.1.0

Image Cropper Widget

Sources Download

MIT