spiral/cropper

This package is abandoned and no longer maintained. No replacement package was suggested.

Image Cropper Widget

v0.4.21 2016-03-03 09:39 UTC

Requires

• spiral/framework: *
• spiral/toolkit: *

MIT

• Alex Chepura

README

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:

<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:

<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:

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.