{"id":15282326,"url":"https://github.com/bilginnet/yii2-cropper","last_synced_at":"2025-04-12T22:55:20.886Z","repository":{"id":62494211,"uuid":"85759814","full_name":"bilginnet/yii2-cropper","owner":"bilginnet","description":"Yii2 Image Cropper InputWidget","archived":false,"fork":false,"pushed_at":"2023-10-23T11:21:47.000Z","size":100,"stargazers_count":22,"open_issues_count":7,"forks_count":27,"subscribers_count":5,"default_branch":"1.0","last_synced_at":"2025-04-12T22:55:15.446Z","etag":null,"topics":["cropper","image","input-widget","yii2-cropper","yii2-extension","yii2-widgets"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bilginnet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-21T22:26:31.000Z","updated_at":"2023-10-23T11:21:52.000Z","dependencies_parsed_at":"2024-06-19T01:39:37.733Z","dependency_job_id":"ca311eba-c573-4b4f-908e-e76f93c2e2aa","html_url":"https://github.com/bilginnet/yii2-cropper","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bilginnet%2Fyii2-cropper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bilginnet%2Fyii2-cropper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bilginnet%2Fyii2-cropper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bilginnet%2Fyii2-cropper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bilginnet","download_url":"https://codeload.github.com/bilginnet/yii2-cropper/tar.gz/refs/heads/1.0","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248643050,"owners_count":21138353,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cropper","image","input-widget","yii2-cropper","yii2-extension","yii2-widgets"],"created_at":"2024-09-30T14:25:09.404Z","updated_at":"2025-04-12T22:55:20.860Z","avatar_url":"https://github.com/bilginnet.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# yii2-cropper\nYii2 Image Cropper InputWidget\n\n[![Minimum PHP Version](http://img.shields.io/badge/php-%3E%3D%205.4-8892BF.svg)](https://php.net/)\n[![Latest Stable Version](https://poser.pugx.org/bilginnet/yii2-cropper/v/stable)](https://packagist.org/packages/bilginnet/yii2-cropper)\n[![Total Downloads](https://poser.pugx.org/bilginnet/yii2-cropper/downloads)](https://packagist.org/packages/bilginnet/yii2-cropper)\n[![Latest Unstable Version](https://poser.pugx.org/bilginnet/yii2-cropper/v/unstable)](https://packagist.org/packages/bilginnet/yii2-cropper)\n[![License](https://poser.pugx.org/bilginnet/yii2-cropper/license)](https://packagist.org/packages/bilginnet/yii2-cropper)\n\n\u003ca href=\"https://fengyuanchen.github.io/cropper/\" target=\"_blank\"\u003eCropper.js\u003c/a\u003e - Bootstrap Cropper (recommended) (already included).\n\nFeatures\n------------\n+ Crop\n+ Image Rotate\n+ Image Flip\n+ Image Zoom\n+ Coordinates\n+ Image Sizes Info\n+ Base64 Data\n+ Set Image.Url Directly \n+ Set Image.Src With Javascript\n\nInstallation\n------------\n\nThe preferred way to install this extension is through [composer](http://getcomposer.org/download/).\n\nEither run\n\n```\nphp composer.phar require --prefer-dist bilginnet/yii2-cropper \"dev-master\"\n```\n\nor add\n\n```\n\"bilginnet/yii2-cropper\": \"dev-master\"\n```\n\nto the require section of your `composer.json` file.\n\n\nUsage\n-----\n\nLet's add into config in your main-local config file before return[]\n````php\n       $baseUrl = str_replace('/backend/web', '', (new Request)-\u003egetBaseUrl());\n       $baseUrl = str_replace('/frontend/web', '', $baseUrl);\n\n       Yii::setAlias('@uploadUrl', $baseUrl.'/uploads/');\n       Yii::setAlias('@uploadPath', realpath(dirname(__FILE__).'/../../uploads/'));\n       // image file will upload in //root/uploads   folder\n       \n       return [\n           ....\n       ]\n````\n\nLet's add  in your model file\n````php\n    public $_image\n\n    public function rules()\n    {\n        return [\n            ['_image', 'safe'],\n        ];\n    }\n    \n    public function beforeSave($insert)\n    {\n        if (is_string($this-\u003e_image) \u0026\u0026 strstr($this-\u003e_image, 'data:image')) {\n\n            // creating image file as png\n            $data = $this-\u003e_image;\n            $data = base64_decode(preg_replace('#^data:image/\\w+;base64,#i', '', $data));\n            $fileName = time() . '-' . rand(100000, 999999) . '.png';\n            file_put_contents(Yii::getAlias('@uploadPath') . '/' . $fileName, $data);\n\n\n            // deleting old image \n            // $this-\u003eimage is real attribute for filename in table\n            // customize your code for your attribute            \n            if (!$this-\u003eisNewRecord \u0026\u0026 !empty($this-\u003eimage)) {\n                unlink(Yii::getAlias('@uploadPath/'.$this-\u003eimage));\n            }\n            \n            // set new filename\n            $this-\u003eimage = $fileName;\n        }\n\n        return parent::beforeSave($insert);\n    }\n````\n\n\n\nAdvanced usage in _form file\n-----\n````php\n echo $form-\u003efield($model, '_image')-\u003ewidget(\\bilginnet\\cropper\\Cropper::className(), [\n    /*\n     * elements of this widget\n     *\n     * buttonId          = #cropper-select-button-$uniqueId\n     * previewId         = #cropper-result-$uniqueId\n     * modalId           = #cropper-modal-$uniqueId\n     * imageId           = #cropper-image-$uniqueId\n     * inputChangeUrlId  = #cropper-url-change-input-$uniqueId\n     * closeButtonId     = #close-button-$uniqueId\n     * cropButtonId      = #crop-button-$uniqueId\n     * browseInputId     = #cropper-input-$uniqueId // fileinput in modal\n    */\n    'uniqueId' =\u003e 'image_cropper', // will create automaticaly if not set\n\n    // you can set image url directly\n    // you will see this image in the crop area if is set\n    // default null\n    'imageUrl' =\u003e Yii::getAlias('@web/image.jpg'),\n    \n    'cropperOptions' =\u003e [\n        'width' =\u003e 100, // must be specified\n        'height' =\u003e 100, // must be specified\n\n        // optional\n        // url must be set in update action\n        'preview' =\u003e [\n            'url' =\u003e '', // (!empty($model-\u003eimage)) ? Yii::getAlias('@uploadUrl/'.$model-\u003eimage) : null\n            'width' =\u003e 100, // must be specified // you can set as string '100%'\n            'height' =\u003e 100, // must be specified // you can set as string '100px'\n        ],\n\n        // optional // default following code\n        // you can customize \n        'buttonCssClass' =\u003e 'btn btn-primary',\n\n        // optional // defaults following code\n        // you can customize \n        'icons' =\u003e [\n            'browse' =\u003e '\u003ci class=\"fa fa-image\"\u003e\u003c/i\u003e',\n            'crop' =\u003e '\u003ci class=\"fa fa-crop\"\u003e\u003c/i\u003e',\n            'close' =\u003e '\u003ci class=\"fa fa-crop\"\u003e\u003c/i\u003e',       \n            'zoom-in' =\u003e '\u003ci class=\"fa fa-search-plus\"\u003e\u003c/i\u003e',\n            'zoom-out' =\u003e '\u003ci class=\"fa fa-search-minus\"\u003e\u003c/i\u003e',\n            'rotate-left' =\u003e '\u003ci class=\"fa fa-rotate-left\"\u003e\u003c/i\u003e',\n            'rotate-right' =\u003e '\u003ci class=\"fa fa-rotate-right\"\u003e\u003c/i\u003e',\n            'flip-horizontal' =\u003e '\u003ci class=\"fa fa-arrows-h\"\u003e\u003c/i\u003e',\n            'flip-vertical' =\u003e '\u003ci class=\"fa fa-arrows-v\"\u003e\u003c/i\u003e',\n            'move-left' =\u003e '\u003ci class=\"fa fa-arrow-left\"\u003e\u003c/i\u003e',\n            'move-right' =\u003e '\u003ci class=\"fa fa-arrow-right\"\u003e\u003c/i\u003e',\n            'move-up' =\u003e '\u003ci class=\"fa fa-arrow-up\"\u003e\u003c/i\u003e',\n            'move-down' =\u003e '\u003ci class=\"fa fa-arrow-down\"\u003e\u003c/i\u003e',\n        ]\n    ],\n\n    // optional // defaults following code\n    // you can customize \n    'label' =\u003e '$model-\u003eattribute-\u003elabel', \n    \n    // optional // default following code\n    // you can customize \n    'template' =\u003e '{button}{preview}',\n\n ]);\n````\n\n\nSimple usage in _form file\n-----\n````php\n echo $form-\u003efield($model, '_image')-\u003ewidget(\\bilginnet\\cropper\\Cropper::className(), [\n    'cropperOptions' =\u003e [\n        'width' =\u003e 100, // must be specified\n        'height' =\u003e 100, // must be specified\n     ]\n]);\n````\n\n\n\njsOptions[]\n-----\n````php\n echo $form-\u003efield($model, '_image')-\u003ewidget(\\bilginnet\\cropper\\Cropper::className(), [\n    'cropperOptions' =\u003e [\n        'width' =\u003e 100, // must be specified\n        'height' =\u003e 100, // must be specified\n     ],\n     'jsOptions' =\u003e [\n        'pos' =\u003e View::POS_END, // default is POS_END if not specified\n        'onClick' =\u003e 'function(event){\n              // when click crop or close button \n              // do something \n        }'        \n     ],\n]);\n````\n\n\n\nNotes\n-----\nDon't forget to add this line into root in .htaccess file\n````\nRewriteRule ^uploads/(.*)$ uploads/$1 [L]\n````\n\nYou can set crop image directly with javascript \n\nSample:\n````\n$('button').click(function() {\n   // #cropper-modal-$unique will show automatically when click the button\n   \n   // you must set uniqueId on widget\n   $('#cropper-url-change-input-' + uniqueId).val('image.jpeg').trigger('change');   \n});\n````\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbilginnet%2Fyii2-cropper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbilginnet%2Fyii2-cropper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbilginnet%2Fyii2-cropper/lists"}