Giter Club home page Giter Club logo

yii2-cropper's Introduction

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

yii2-cropper's People

Contributors

art009 avatar carlocaprini avatar dmitrybay avatar itsjereme avatar krivochenko avatar linuskohl avatar matvik avatar maxprihodko8 avatar oonne avatar softark avatar uraankhayayaal avatar xavsio4 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

yii2-cropper's Issues

Apache crashes when cropping image

Hi. I have apache version 2.4 installed on Openserver. And when I try to crop image apache crashes and gives error POST http://yii2-starter-kit/admin/projects/uploadPhoto/ net::ERR_CONNECTION_RESET.
I have the following configuration:

field($model, 'avatar')->widget(Widget::className(), [ 'uploadUrl' => Url::toRoute('/projects/uploadPhoto'), 'width' => 370, 'height' => 290, 'cropAreaWidth' => 370, 'cropAreaHeight' => 290, ]) ?>

in ProjectsController:
public function actions()
{
return [
'uploadPhoto' => [
'class' => 'budyaga\cropper\actions\UploadAction',
'url' => 'http://yii2-starter-kit/uploads/projects',
'path' => '@frontend/web/uploads/projects',
]
];
}
.htaccess on root directory
Options -Indexes
RewriteEngine on
RewriteCond %{REQUEST_URI} ^/admin/$
RewriteRule ^(admin)/$ /$1 [R=301,L]
RewriteCond %{REQUEST_URI} ^/admin
RewriteRule ^admin(/.+)?$ /backend/web/$1 [L,PT]
RewriteCond %{REQUEST_URI} ^.$
RewriteCond %{REQUEST_URI} !storage
RewriteRule ^(.)$ /frontend/web/$1
Please, help

Erron on crop

Hello, I would like to use this tool in Yii2, but unfortunately I get the following error:

Exception 'yii\base\InvalidArgumentException' with message 'Response content must not be an array.'

Appropriate rights in the controller for "upload" have been granted.

My files look like this:

Controller.php
public function actionUpload() { return [ 'uploadPhoto' => [ 'class' => 'budyaga\cropper\actions\UploadAction', 'url' => '/images/news', 'path' => '@frontend/web/images/news', ] ]; }

form.php
<?php echo $form->field($model, 'pictureFile')->widget(Widget::className(), [ 'uploadUrl' => URL::to(['news/upload']), ]) ?>

Delete Image should delete the file

Hi,
Thanks for great component. It works great!
However I have found that deleting the Image does not remove the file. It would be great functionality when user does a mistake and want to remove the file and re-generated cropped file.

The Simplest way would be defining another URL for delete where the onclick handler will pass the file name before removing the image in canvas.

Will you accept PR for that?

Drag and drop not working

I am experiencing a problem when trying to upload an image using "drag and drop" approach.
This error actually appears randomly.

The javascript console (Firefox) gives me the following error:

"TypeError: Argument 1 of FileReader.readAsDataURL is not an object.".

Attached is also a screenshot of the Chrome console.

schermata 2016-06-23 alle 10 35 11

UploadAction, invalid uploadParameter

UploadAction has uploadParam not uploadParameter - like readme says.
And it cannot be changed, because in UploadAction:50 $file is hardcoded so compact() in :51 don't work.

Need an option to save original image

As the title says, I need an option to save original image as well, but I don't see that option in your documentation.

And also, possibly an option to save a thumbnail of cropped image

неправильная работа js

У вас ошибка при работе жс валидации, если происходит ошибка валидации то некорректно отрабытывает ф-ция отображения ошибки (алерт на все поля формы) из за некоректнной работы parents на строке 131 в cropper.js
cropper.$widget.parents('.form-group').addClass('has-error').find('.help-block').text(error);
нужно всего лишь заменить на клозест
cropper.$widget.closest('.form-group').addClass('has-error').find('.help-block').text(error);
image

Не правильно работает с большими изображениями

Добрый день Сергей! Вроде с маленькими изображениями все нормально, но вот при загрузке большого - выделенная область не соответствует сохранённой обрезанной миниатюре. Как можно исправить?

Regarding Storing file to S3

Is there any way to store files directly to s3 bucket instead of storing files to physical disc space ? can anyone put the code if there is or is there any alternative option for this ?
Is there any way to get data into base64 to store into S3

How to save full uploaded image?

Hello!

What to change in the widget code, if I would like to save full (uploaded) image. Meaning, the "crop" button isn't presses, just image file uploaded and the form submited.

Regards,
Mikk

Hide/show new-photo-area

Hello!
How can i hide/show "new-photo-area" , when i click "crop-photo" / "upload-new-photo" buttons?
I add "onClick" events for "crop-photo", and this works fine, "new-photo-area" is hide.
But when i added events for "upload-new-photo" button nothing happens, only opened file choosen dialog. onClick event is not fired

UploadUrl parameter

hi
i have an ActiveForm with several field and an image. I want to crop image for uploading.
im not sure if my uploudUrl is right.
it should be an action url?
if it is true, what should be happend in that action?

404 when cropping image

I have same problem. When I upload image, and submit button Crop photo, after in console of browser appears such a alert " http://localhost/st2/frontend/web/uploads/post/ Failed to load resource: the server responded with a status of 404 (Not Found) "

 <?= $form->field($model, 'image')->widget(Widget::className(), [
    'uploadUrl' => Url::toRoute('uploads/post/'),
]) ?>

.

}
public function actions()
{
    return [
        'uploadPhoto' => [
            'class' => 'budyaga\cropper\actions\UploadAction',
            'url' =>  Yii::$app->request->baseUrl.'/uploads/post/thumb',
            'path' => Yii::$app->request->baseUrl.'/uploads/post/thumb',
        ]
    ];
}

How can I fix it?

Filename

Hi, is it possible to specify the file name that will be saved?

Thanks

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.