{"id":23021627,"url":"https://github.com/raupulus/vue-component-image-cropper","last_synced_at":"2025-06-17T14:34:51.515Z","repository":{"id":95713026,"uuid":"303187421","full_name":"raupulus/vue-component-image-cropper","owner":"raupulus","description":"Componente para recortar y seleccionar el área resultante de una imagen pudiendo así quedar en las proporciones que se necesite. Mirror de https://gitlab.com/raupulus/vue-component-image-cropper","archived":false,"fork":false,"pushed_at":"2023-03-19T14:37:30.000Z","size":1157,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-02T18:52:44.404Z","etag":null,"topics":["component","crop","crop-image","hacktoberfest","image","image-crop","image-cropper","vue","vuejs"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/raupulus.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":"2020-10-11T18:34:17.000Z","updated_at":"2023-03-16T12:02:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"e3b44d85-6366-4212-85d3-71447797fd76","html_url":"https://github.com/raupulus/vue-component-image-cropper","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/raupulus/vue-component-image-cropper","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raupulus%2Fvue-component-image-cropper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raupulus%2Fvue-component-image-cropper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raupulus%2Fvue-component-image-cropper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raupulus%2Fvue-component-image-cropper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/raupulus","download_url":"https://codeload.github.com/raupulus/vue-component-image-cropper/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raupulus%2Fvue-component-image-cropper/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260379791,"owners_count":23000142,"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":["component","crop","crop-image","hacktoberfest","image","image-crop","image-cropper","vue","vuejs"],"created_at":"2024-12-15T12:18:44.833Z","updated_at":"2025-06-17T14:34:46.502Z","avatar_url":"https://github.com/raupulus.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Image Cropper (WIP status)\n\nThis component is in beta phase.\n\nWill reach version 1.0.0 when you have an acceptable state for use.\n\n---\n\nThis component helps cut out images by maintaining the proportions and leaving it in the size established based on the width (eg: 150px, 400px, 600px) \n\nAlso allows to store the result on base64 within an input with the name we predefined or upload it to an API.\n\n---\n\n![Previsualización 1](https://gitlab.com/fryntiz/vue-component-image-cropper/-/raw/master/image-preview-1.png)\n![Previsualización 2](https://gitlab.com/fryntiz/vue-component-image-cropper/-/raw/master/image-preview-2.png)\n\n---\n\nEste componente ayuda a recortar imágenes manteniendo las proporciones y dejándola en el tamaño establecido en base al ancho (EJ: 150px, 400px, 600px)\n\nAdemás permite almacenar el resultado en base64 dentro de un input con el nombre que predefinamos o subirlo a una api.\n\n\n## Features and Work In Progress\n\n- [x] Set start image path (prop: image_path)\n- [x] Set preview rounded (prop: rounded)\n- [x] Set width of result (prop: width)\n- [x] Set preview width (prop: preview_width)\n- [x] Set preview input name (prop: input_name)\n- [x] Set Aspect Ratio 1, 1/2, 1/4, 16/9, 21/9... (prop: aspect_ratio)\n- [x] Set API url (prop: api_url)\n- [x] Set API Token Bearer (prop: api_token), only if you need it.\n- [x] Set API resource id to related image (prop: api_id), only if you need it.\n- [x] Set image name for alt and title (prop: name), optional.\n- [x] Upload to API → Experimental, for debug.\n- [x] Set enable API upload\n- [x] Set csrf token to API upload (prop: csrf_token)\n- [ ] Spinner while uploading the image\n- [ ] Set Lazy Image path\n\n## Dependencies\n\n- axios \u0026 axios-vue\n\n## Plain Html Project\n\n```html\n\u003cscript src=\"https://unpkg.com/vue\"\u003e\u003c/script\u003e\n\u003cscript src=\"./CropperImage.umd.js\"\u003e\u003c/script\u003e\n\n\u003cdiv id=\"app\"\u003e\n  \u003cv-cropper-image \n    preview_width=\"150\"\n    image_path=\"./images/example.jpg\"\n    aspect_ratio=\"1/4\"\n    input_name=\"user_avatar\"\n    width=\"150\"\n    \u003e\u003c/v-cropper-image\u003e\n\u003c/div\u003e\n\n\u003cscript\u003e\nnew Vue({\n  components: {\n    \"v-cropper-image\": CropperImage\n  }\n}).$mount('#app')\n\u003c/script\u003e\n```\n\n## Laravel or JS Project\n\n```html\n\u003cv-cropper-image \n    preview_width=\"150\"\n    image_path=\"./images/example.jpg\"\n    aspect_ratio=\"1/4\"\n    input_name=\"user_avatar\"\n    width=\"150\"\n    \u003e\u003c/v-cropper-image\u003e\n```\n\n```js\nrequire('vue-component-image-cropper/dist/CropperImage.umd.min.js');\n\nconst app = new Vue({\n    el: '#app',\n    components: {\n        'v-cropper-image': CropperImage\n    }\n});\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraupulus%2Fvue-component-image-cropper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraupulus%2Fvue-component-image-cropper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraupulus%2Fvue-component-image-cropper/lists"}