PHPackages sawastacks/kropify-laravel - 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. [Image & Media](/categories/media) 4. / 5. sawastacks/kropify-laravel ActiveLibrary[Image & Media](/categories/media) sawastacks/kropify-laravel ========================== Kropify is a tool that can be integrated into Laravel framework from version 8 and above for the purpose of giving users easy way to crop their profile pictures and cover images. v3.0.0(1y ago)41.1kโ†“76.2%4MITPHPPHP ^7.2|^8.0 Since Oct 26Pushed 1y ago1 watchersCompare [ Source](https://github.com/sawastacks/kropify-laravel)[ Packagist](https://packagist.org/packages/sawastacks/kropify-laravel)[ Docs](https://github.com/sawastacks/kropify-laravel)[ RSS](/packages/sawastacks-kropify-laravel/feed)WikiDiscussions main Synced 3d ago READMEChangelog (3)DependenciesVersions (4)Used By (0) [!['Kropify'](img/kropify.png)](img/kropify.png) [![GitHub release](https://camo.githubusercontent.com/18cb1f82fa8055aaa27db521f17ac7c0844ec83ec25e3da338a30a9460343d1e/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f73617761737461636b732f6b726f706966792d6c61726176656c)](https://camo.githubusercontent.com/18cb1f82fa8055aaa27db521f17ac7c0844ec83ec25e3da338a30a9460343d1e/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f73617761737461636b732f6b726f706966792d6c61726176656c) [![GitHub code size in bytes](https://camo.githubusercontent.com/a1ef047705376dd67b48ce89f2dc9fef3b4a8262861b00991d00b1f183355b2e/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c616e6775616765732f636f64652d73697a652f73617761737461636b732f6b726f706966792d6c61726176656c)](https://camo.githubusercontent.com/a1ef047705376dd67b48ce89f2dc9fef3b4a8262861b00991d00b1f183355b2e/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c616e6775616765732f636f64652d73697a652f73617761737461636b732f6b726f706966792d6c61726176656c) [![Total Downloads](https://camo.githubusercontent.com/a53a197c254a1a399ee5632bf110121299263bf222458ae7cfa172ab4d80045f/68747470733a2f2f706f7365722e707567782e6f72672f73617761737461636b732f6b726f706966792d6c61726176656c2f646f776e6c6f616473)](https://packagist.org/packages/sawastacks/kropify-laravel) [![Package License](https://camo.githubusercontent.com/1a2e0606685ce00663bf829868f794fd3fc9c86f8d80cae324734129e0723a58/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d627269676874677265656e2e737667)](LICENSE) [![GitHub Org's stars](https://camo.githubusercontent.com/dc154b1798511882a308c163cd9403ed36e2300dc6bd6331990f2f8b6620ef1b/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f73617761737461636b732f6b726f706966792d6c61726176656c3f7374796c653d736f6369616c)](https://camo.githubusercontent.com/dc154b1798511882a308c163cd9403ed36e2300dc6bd6331990f2f8b6620ef1b/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f73617761737461636b732f6b726f706966792d6c61726176656c3f7374796c653d736f6369616c) Kropify - Image Cropping Package ================================ [](#kropify---image-cropping-package) - Author: Sawa Stacks - GitHub - License: MIT License - Initial version: 10/03/2023 This package (Kropify class) handles the server-side file upload and saving. The Kropify.js script integrates with the frontend to provide cropping, previewing, and uploading of images with your [`Laravel`](https://laravel.com/) backend. This package is built using vanilla JavaScript, so it doesn't require jQuery as a dependency. It's lightweight, easy to integrate into your project without adding any extra library overhead, and supports multiple instances on a single page. [ ![drawing](img/bmc.png) ](https://www.buymeacoffee.com/sawastacks) Requirements ------------ [](#requirements) - PHP >= 7.2 - [Composer](https://getcomposer.org/) is required - Laravel 8.x, 9.x , 10.x, 11.x and 12.x Installation ------------ [](#installation) This package can be installed through `composer require` command. Before install this, make sure that your are working with PHP >= 7.2 in your system. Just run the following command in your cmd or terminal: 1. Install the package via Composer: ``` composer require sawastacks/kropify-laravel ``` The package will automatically register its service provider if your Laravel framework is 8.x or above. 2. Optionally, After you have installed **Kropify**, open your Laravel config file **`config/app.php`** and add the following lines. In the **`$providers`** array, add the service providers for this package. ``` SawaStacks\Utils\KropifyServiceProvider::class, ``` 3. After **Kropify** package installed, you need to publish its css and js minified files in Laravel public folder by running the following command in terminal: ``` php artisan vendor:publish --tag=kropify-assets ``` > **NOTE:** **`Kropify`** package assets files can be included on blade file via CDN links instead of using published files. If you need to use CDN links, just use below links: ``` ``` ``` ``` ### Updating Package [](#updating-package) When new **Kropify** version released and try to update the current package to the latest version, you will need to use `composer update` command: ``` composer update sawastacks/kropify-laravel ``` When package not updated by using the above command, use below command that will remove current package version and install new version of package. ``` composer remove sawastacks/kropify-laravel && composer require sawastacks/kropify-laravel ``` After Kropify package updated, you need also to update its assets (**css** and **js** minified files) by running the following command in terminal: ``` php artisan vendor:publish --tag=kropify-assets --force ``` For `Kropify` directives, you have to run this command to get immediately changes in views. ``` php artisan view:clear ``` Finally, It is neccessary to run the following command to autoload package files. ``` composer dump-autoload ``` Usage ===== [](#usage) This package uses **css** and **js** minified files, that is why you first need to include this package assets on your blade file. Place the following directive inside **``** tag of your blade file to including Kropify css file on page. So, if you are using published file, use package style directive as shown below: ``` Page title @kropifyStyles ...... ... ``` When you're using CDN links, no need of using any directive, just use below way: ``` Page title ...... ... ``` `NOTICE:` Don't forgot to add `CSRF` meta tags to every blade file included **Kropify** assets as shown in above example. For **Kropify** Js file, you need to add the following directive inside **``** tag but before closing **``** tag as shown in below example: ``` .......... ..... @kropifyScripts ``` But when you're using CDN links, use it in way below: ``` .......... ..... ``` ### Package initialization [](#package-initialization) Suppose that you have an input file on your form for user profile picture: ``` > Document @kropifyStyles ........ .......... ........... @kropifyScripts const cropper = new Kropify('#imageInput', { aspectRatio: 1, preview: '#image-preview', processURL: '{{ route("crop-handler") }}', // or processURL:'/crop' allowedExtensions: ['jpg', 'jpeg', 'png'], showLoader: true, animationClass: 'pulse', // fileName: 'avatar', // leave this commented if you want it to default to the input name cancelButtonText:'Cancel', maxWoH:500, onError: function (msg) { alert(msg); // toastr.error(msg); }, onDone: function(response){ alert(response.message); console.log(response.data); // toastr.success(response.message); } }); ``` Routes ------ [](#routes) ``` Route::post('/crop',[TestController::class,'cropHandler'])->name('crop-handler'); ``` ๐Ÿ–ผ๏ธ Kropify scripts - Frontend Integration ----------------------------------------- [](#๏ธ-kropify-scripts---frontend-integration) The Kropify script handles the cropping interface, sends AJAX requests, and previews the result. When you want to initiate **Kropify** on that particular input file, you will use the following scripts. ``` const cropper = new Kropify('#imageInput', { aspectRatio: 1, viewMode: 1, preview: 'img#image-preview', processURL: '{{ route("crop-handler") }}', // or processURL:'/crop' maxSize: 2 * 1024 * 1024, // 2MB allowedExtensions: ['jpg', 'jpeg', 'png'], showLoader: true, animationClass: 'pulse', // fileName: 'avatar', // leave this commented if you want it to default to the input name cancelButtonText:'Cancel', resetButtonText: 'Reset', cropButtonText: 'Crop & Upload', maxWoH:500, onError: function (msg) { alert(msg); // toastr.error(msg); }, onDone: function(response){ // alert(response.message); console.log(response); // toastr.success(response.message); } }); ``` โš™๏ธ Kropify.js Options --------------------- [](#๏ธ-kropifyjs-options) OptionTypeDescription`viewMode``Number`You can set this value to (1,2 or 3). But you can not add this option if you are happy with the default value which is 1.`aspectRatio``Number`Aspect ratio for cropping. You can add your custom cropped image ratio. You can use fractional numbers and float numbers. **eg**: `16/4`, `10/32`, `0.25`, `2.25`, etc... Default value is `1``preview``String`CSS selector for image preview. you must use jquery selector to select **id="..."** or **class="..."** of the img tag element where you want to display cropped image result.`processURL``String`URL to send the cropped image to (your Laravel route). This option is very required. You must define your url of croping selected image. eg: ***processURL : "{{ route('crop') }}"*** or ***processURL : "{{ url('crop') }}"***`allowedExtensions``Array`Allowed file extensions default value is: *\['jpg', 'jpeg', 'png'\]*.`showLoader``Boolean`Show loading indicator. Default value is `true``animationClass``String`CSS animation class for animate modal box. you may use this option by choosing one of three animation classes allowed `pulse`,`headShake`,`fadeIn` and `pulse`. By default, this value set to `pulse` class`fileName``String`Desired filename for the uploaded image. This will be used when want to specify or overwrite file name of the input file. Default value is `image`, In controller you may write: *$upload = Kropify::getFile('image')->...*`cancelButtonText``String`You can change this button text with your need and according to your language.`resetButtonText``String`You can change this button text with your need and according to your language.`cropButtonText``String`You can change this button text with your need and according to your language.`maxWoH``Number`Maximum width / height of the image.`onError``Function`Callback function on error (shows alert/toastr/etc.).`onDone``Function`Callback function when upload is successful (`response` is passed).`maxSize``Number`By default, this value set to the maximum size of **2MB** .But, you can set your own maximum size of selected image.Callbacks --------- [](#callbacks) ``` onError: function (msg) { alert(msg); // toastr.error(msg); }, onDone: function(response){ alert(response.message); console.log(response.data); // toastr.success(response.message); } ``` In controller ------------- [](#in-controller) To include **Kropify** class in controller is very simple. Just import the following lines on your controller. ``` use SawaStacks\Utils\Kropify; ``` To upload the cropped image you will use the following lines inside method: ``` public function cropHandler(Request $request){ $file = $request->file('avatar'); $path = 'uploads'; /** When you upload with move() */ $upload = Kropify::getFile($file,'userpic.png') // ->setDisk('public') // local, public ->setPath($path) ->useMove() ->save(); /** When you upload with Storage */ $upload = Kropify::getFile($file,'userpic.png') ->setDisk('public') // local, public ->setPath($path) // ->useMove() ->save(); /** * GET UPLOADED IMAGE DETAILS (INFO) * ================================= * */ // if( $upload ){ $info = $upload->getUploadedInfo(); } // $info = $upload ? $upload->getUploadedInfo() : null; // $info = $upload?->getUploadedInfo(); if (!$upload) { return; } $info = $upload->getUploadedInfo(); // Store image details into DB $im = new StoredImage(); $im->filename = $info['filename']; $im->size = $info['size']; $im->extension = $info['extension']; $im->width = $info['width']; $im->height = $info['height']; $im->mime = $info['mime']; $im->path = $info['path']; $im->url = $info['url']; $im->save(); // Returning json data return response()->json([ 'status'=>'OK', 'message'=>'Image successfully uploaded', 'data'=>$info ],201); } ``` ๐Ÿš€ Kropify Class - Methods Overview ---------------------------------- [](#-kropify-class---methods-overview) MethodDescriptionUsage/Notes`getFile($file, $filename = null)`Initializes the file upload. Must be called first.`$file`: instance of uploaded file, `$filename`: optional custom filename.`setDisk(string $disk)`Set the storage disk to use (`public`, `local`, etc.).Throws error if `useMove()` already used or if not preceded by `getFile()`.`useMove()`Use PHPโ€™s `move()` instead of Laravelโ€™s `Storage`.Canโ€™t be used with `setDisk()`.`setPath(string $path)`Set the relative path (within storage/public) for the file.Example: `uploads/avatars`.`save()`Saves the uploaded file. Must be called after setting up the upload.Can only be called once per instance.`getUploadedInfo()`Retrieve details of the saved file: filename, size, extension, dimensions, mime, path, URL.Can only be called after `save()`.๐Ÿ“„ License ========= [](#-license) This package is open-sourced software licensed under the [MIT license](https://github.com/sawastacks/kropify-laravel/blob/master/LICENSE). ๐Ÿ™Œ Credits =========== [](#-credits-) Author: Sawa Stacks ๐Ÿ“ง Email: ๐ŸŒ GitHub: [github.com/sawastacks](https://github.com/sawastacks) ### Health Score 34 โ€” LowBetter than 75% of packages Maintenance47 Moderate activity, may be stable Popularity24 Limited adoption so far Community9 Small or concentrated contributor base Maturity46 Maturing project, gaining track record 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. ### Release Activity Cadence Every ~108 days Total 3 Last Release 399d ago Major Versions v1.0.0 โ†’ v2.0.02024-10-26 v2.0.0 โ†’ v3.0.02025-05-31 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/77852570?v=4)[SawaStacks](/maintainers/sawastacks)[@sawastacks](https://github.com/sawastacks) --- Top Contributors [![sawastacks](https://avatars.githubusercontent.com/u/77852570?v=4)](https://github.com/sawastacks "sawastacks (40 commits)") --- Tags cropcrop-imagecroppercropperjsijaboijabocroptoolimagemberecallresizeresize-imagesresizerphplaravelcropcroppingcropperkropifylaravel-kropifyijabocroptoolsawastacks ### Embed Badge ![Health badge](/badges/sawastacks-kropify-laravel/health.svg) ``` [![Health](https://phpackages.com/badges/sawastacks-kropify-laravel/health.svg)](https://phpackages.com/packages/sawastacks-kropify-laravel) ``` ### Alternatives [tomatophp/filament-media-manager Manage your media files using spatie media library with easy to use GUI for FilamentPHP 14852.3k3](/packages/tomatophp-filament-media-manager)[nikkanetiya/laravel-color-palette Laravel Wrapper for `ksubileau/color-thief-php`. Grabs the dominant color or a representative color palette from an image. Uses PHP and GD or Imagick. 3312.7k](/packages/nikkanetiya-laravel-color-palette) PHPackages ยฉ 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)