budyaga/yii2-cropper Yii-Framework widget for uploading and cropping images

extensionuploadcrop

Cropper

Yii-Framework extension for uploading and cropping images

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist budyaga/yii2-cropper "*"

or add

"budyaga/yii2-cropper": "*"

to the require section of your composer.json file.

Usage

Once the extension is installed, simply use it in your code by :

use budyaga\cropper\Widget;
<?php $form = ActiveForm::begin(['id' => 'form-profile']); ?>
    <?php echo $form->field($model, 'photo')->widget(Widget::className(), [
        'uploadUrl' => Url::toRoute('/user/user/uploadPhoto'),
    ]) ?>
    <div class="form-group">
        <?php echo Html::submitButton('Save', ['class' => 'btn btn-primary']) ?>
    </div>
<?php ActiveForm::end(); ?>

Widget has following properties:

Name Description Default Required
uploadParameter Upload parameter name file No
width The final width of the image after cropping 200 No
height The final height of the image after cropping 200 No
label Hint in box for preview It depends on application language. You can translate this message on your language and make pull-request. No
uploadUrl URL for uploading and cropping image Yes
noPhotoImage The picture, which is used when a photo is not loaded. You can see it on screenshots in this instructions No
maxSize The maximum file size (kb). 2097152 No
cropAreaWidth Width box for preview 300 No
cropAreaHeight Height box for preview 300 No
aspectRatio Fix aspect ratio of cropping area null No
extensions Allowed file extensions (string). jpeg, jpg, png, gif No

In UserController:

public function actions()
{
    return [
        'uploadPhoto' => [
            'class' => 'budyaga\cropper\actions\UploadAction',
            'url' => 'http://your_domain.com/uploads/user/photo',
            'path' => '@frontend/web/uploads/user/photo',
        ]
    ];
}

Action has following parameters:

Name Description Default Required
path Path for saving image after cripping Yes
url URL to which the downloaded images will be available. Yes
uploadParameter Upload parameter name. It must match the value of a similar parameter of the widget. file No
maxSize The maximum file size (kb). It must match the value of a similar parameter of the widget. 2097152 No
extensions Allowed file extensions (string). It must match the value of a similar parameter of the widget. jpeg, jpg, png, gif No
width The final width of the image after cropping. It must match the value of a similar parameter of the widget. 200 No
height The final height of the image after cropping. It must match the value of a similar parameter of the widget. 200 No
jpegQuality Quality of cropped image (JPG) 100 No
pngCompressionLevel Quality of cropped image (PNG) 1 No

You can use this widget on frontend and backend. For example: user can change his userpic and administrator can change users userpic.

Operates as follows:

User click on new photo area or drag file

g4n7fva

The picture is loaded by JavaScript FileAPI.

yeul3gy

This picture is displayed in the widget and users have the ability to crop it or upload another picture

jaungjk

When the user clicks "Crop image", a request with file and coordinates is sent to the server. This picture is displayed in the form, and user can save it, or change crop area, or upload another photo.

0ejh55q

Changelog

2.0.19

  • Fix for calculating ration
  • Add settings for image quality

2.0.18

  • Add aspectRatio setting

2.0.17

  • Fix syntax error when save file

2.0.16

  • Fix saving image

2.0.15

  • Add aspectRatio at frontend
  • Settings for Widget at frontend
  • Better quality for uploaded images
  • Add translation at Ukrainian

2.0.14

  • Fix incorrect using widget parameters when calculate crop ratio

2.0.13

  • Change ajax uploader version

2.0.12

  • Fix of path to bower assets

2.0.11

  • Change ajax uploader version

2.0.10

  • Message translations of Chinese

2.0.9

  • Added es and fr translations in messages

2.0.8

  • Add Polish translation

2.0.7

  • Add event "onCompleteJcron"

2.0.6

  • Fixes and refactoring

2.0.5

  • Supporting UK language

2.0.4

  • PHPDoc comments added
  • Changelog added

2.0.3

  • Issue with adding image by drag and drop fixed
  • Refactoring

2.0.2

  • Clearing error message in case successful cropping

2.0.1

  • Issue with different register in file extension fixed

2.0.0

  • Using JavaScript for creating preview by FileReader
  • Default value for propertie noPhotoImage added
  • Upload and Crop actions in one UploadAction merged
  • CropAction removed
  • Clien-side validation added
  • Progress bar added

1.0.0

  • Initial version

Statistics

Downloads
GitHub Stars
GitHub Forks

Releases

Comments



2.0.22 is the latest of 24 releases



BSD-3-Clause license
Stats
44 github stars & 61 github forks
20 downloads in the last day
367 downloads in the last 30 days
44993 total downloads