PHPackages sleifer/yii2-cropper - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. sleifer/yii2-cropper ActiveYii2-extension[Utility & Helpers](/categories/utility) sleifer/yii2-cropper ==================== Yii2 Bootstrap Cropper Input Widget 028↓100%JavaScript Since May 13Pushed 12mo ago1 watchersCompare [ Source](https://github.com/ismaelsleifer/yii2-cropper)[ Packagist](https://packagist.org/packages/sleifer/yii2-cropper)[ RSS](/packages/sleifer-yii2-cropper/feed)WikiDiscussions master Synced 1mo ago READMEChangelogDependenciesVersions (1)Used By (0) yii2-cropper ============ [](#yii2-cropper) Yii2 Image Cropper InputWidget [![Minimum PHP Version](https://camo.githubusercontent.com/b8feeff753e7c6ff51ffd26c612be3c4f292513e413cd0c8884e665ff51dd798/687474703a2f2f696d672e736869656c64732e696f2f62616467652f7068702d253345253344253230352e342d3838393242462e737667)](https://php.net/)[![Latest Stable Version](https://camo.githubusercontent.com/46ba2cfb2a5ff7bd53704d376b4cb30cb901b2fa4d93f924207b7ae2117dd562/68747470733a2f2f706f7365722e707567782e6f72672f62696c67696e6e65742f796969322d63726f707065722f762f737461626c65)](https://packagist.org/packages/bilginnet/yii2-cropper)[![Total Downloads](https://camo.githubusercontent.com/1727671e3718b9d3dcf6b4140a1690ff97d90628d14ab8a821887d917b4a346a/68747470733a2f2f706f7365722e707567782e6f72672f62696c67696e6e65742f796969322d63726f707065722f646f776e6c6f616473)](https://packagist.org/packages/bilginnet/yii2-cropper)[![Latest Unstable Version](https://camo.githubusercontent.com/0f6ab36d8cd14396296305d397bcb613b6db1ac34079e478e8dd4ac928e50ce1/68747470733a2f2f706f7365722e707567782e6f72672f62696c67696e6e65742f796969322d63726f707065722f762f756e737461626c65)](https://packagist.org/packages/bilginnet/yii2-cropper)[![License](https://camo.githubusercontent.com/649af0b7351855b21a5bbf7eea703c7660113b58346a016a042647b9e1e98c6e/68747470733a2f2f706f7365722e707567782e6f72672f62696c67696e6e65742f796969322d63726f707065722f6c6963656e7365)](https://packagist.org/packages/bilginnet/yii2-cropper) [Cropper.js](https://fengyuanchen.github.io/cropper/) - Bootstrap Cropper (recommended) (already included). Features -------- [](#features) - Crop - Image Rotate - Image Flip - Image Zoom - Coordinates - Image Sizes Info - Base64 Data - Set Image.Url Directly - Set Image.Src With Javascript Installation ------------ [](#installation) The preferred way to install this extension is through [composer](http://getcomposer.org/download/). Either run ``` php composer.phar require --prefer-dist bilginnet/yii2-cropper "dev-master" ``` or add ``` "bilginnet/yii2-cropper": "dev-master" ``` to the require section of your `composer.json` file. Usage ----- [](#usage) Let's add into config in your main-local config file before return\[\] ``` $baseUrl = str_replace('/backend/web', '', (new Request)->getBaseUrl()); $baseUrl = str_replace('/frontend/web', '', $baseUrl); Yii::setAlias('@uploadUrl', $baseUrl.'/uploads/'); Yii::setAlias('@uploadPath', realpath(dirname(__FILE__).'/../../uploads/')); // image file will upload in //root/uploads folder return [ .... ] ``` Let's add in your model file ``` public $_image public function rules() { return [ ['_image', 'safe'], ]; } public function beforeSave($insert) { if (is_string($this->_image) && strstr($this->_image, 'data:image')) { // creating image file as png $data = $this->_image; $data = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $data)); $fileName = time() . '-' . rand(100000, 999999) . '.png'; file_put_contents(Yii::getAlias('@uploadPath') . '/' . $fileName, $data); // deleting old image // $this->image is real attribute for filename in table // customize your code for your attribute if (!$this->isNewRecord && !empty($this->image)) { unlink(Yii::getAlias('@uploadPath/'.$this->image)); } // set new filename $this->image = $fileName; } return parent::beforeSave($insert); } ``` Advanced usage in \_form file ----------------------------- [](#advanced-usage-in-_form-file) ``` echo $form->field($model, '_image')->widget(\bilginnet\cropper\Cropper::className(), [ /* * elements of this widget * * buttonId = #cropper-select-button-$uniqueId * previewId = #cropper-result-$uniqueId * modalId = #cropper-modal-$uniqueId * imageId = #cropper-image-$uniqueId * inputChangeUrlId = #cropper-url-change-input-$uniqueId * closeButtonId = #close-button-$uniqueId * cropButtonId = #crop-button-$uniqueId * browseInputId = #cropper-input-$uniqueId // fileinput in modal */ 'uniqueId' => 'image_cropper', // will create automaticaly if not set // you can set image url directly // you will see this image in the crop area if is set // default null 'imageUrl' => Yii::getAlias('@web/image.jpg'), 'cropperOptions' => [ 'width' => 100, // must be specified 'height' => 100, // must be specified // optional // url must be set in update action 'preview' => [ 'url' => '', // (!empty($model->image)) ? Yii::getAlias('@uploadUrl/'.$model->image) : null 'width' => 100, // must be specified // you can set as string '100%' 'height' => 100, // must be specified // you can set as string '100px' ], // optional // default following code // you can customize 'buttonCssClass' => 'btn btn-primary', // optional // defaults following code // you can customize 'icons' => [ 'browse' => '', 'crop' => '', 'close' => '', 'zoom-in' => '', 'zoom-out' => '', 'rotate-left' => '', 'rotate-right' => '', 'flip-horizontal' => '', 'flip-vertical' => '', 'move-left' => '', 'move-right' => '', 'move-up' => '', 'move-down' => '', ] ], // optional // defaults following code // you can customize 'label' => '$model->attribute->label', // optional // default following code // you can customize 'template' => '{button}{preview}', ]); ``` Simple usage in \_form file --------------------------- [](#simple-usage-in-_form-file) ``` echo $form->field($model, '_image')->widget(\bilginnet\cropper\Cropper::className(), [ 'cropperOptions' => [ 'width' => 100, // must be specified 'height' => 100, // must be specified ] ]); ``` jsOptions\[\] ------------- [](#jsoptions) ``` echo $form->field($model, '_image')->widget(\bilginnet\cropper\Cropper::className(), [ 'cropperOptions' => [ 'width' => 100, // must be specified 'height' => 100, // must be specified ], 'jsOptions' => [ 'pos' => View::POS_END, // default is POS_END if not specified 'onClick' => 'function(event){ // when click crop or close button // do something }' ], ]); ``` Notes ----- [](#notes) Don't forget to add this line into root in .htaccess file ``` RewriteRule ^uploads/(.*)$ uploads/$1 [L] ``` You can set crop image directly with javascript Sample: ``` $('button').click(function() { // #cropper-modal-$unique will show automatically when click the button // you must set uniqueId on widget $('#cropper-url-change-input-' + uniqueId).val('image.jpeg').trigger('change'); }); ``` ### Health Score 17 — LowBetter than 6% of packages Maintenance37 Infrequent updates — may be unmaintained Popularity7 Limited adoption so far Community7 Small or concentrated contributor base Maturity14 Early-stage or recently created project Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Community Maintainers ![](https://www.gravatar.com/avatar/0ab27306e8213792a11350fd13c73c29a4b83285128f9609c70821910eba02e8?d=identicon)[sleifer](/maintainers/sleifer) --- Top Contributors [![ismaelsleifer](https://avatars.githubusercontent.com/u/6524272?v=4)](https://github.com/ismaelsleifer "ismaelsleifer (11 commits)") ### Embed Badge ![Health badge](/badges/sleifer-yii2-cropper/health.svg) ``` [![Health](https://phpackages.com/badges/sleifer-yii2-cropper/health.svg)](https://phpackages.com/packages/sleifer-yii2-cropper) ``` ### Alternatives [qinchen/web-utils A web application common utils 111.4k](/packages/qinchen-web-utils) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)