{"id":13701459,"url":"https://github.com/overtrue/vue-avatar-cropper","last_synced_at":"2025-05-15T20:05:34.910Z","repository":{"id":39007950,"uuid":"97704795","full_name":"overtrue/vue-avatar-cropper","owner":"overtrue","description":":girl: A simple and elegant avatar cropping and upload plugin.","archived":false,"fork":false,"pushed_at":"2024-07-26T21:02:38.000Z","size":4234,"stargazers_count":514,"open_issues_count":11,"forks_count":93,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-10T07:05:44.055Z","etag":null,"topics":["avatar-cropper","cropper","vue","vue-avatar","vue-avatar-cropper"],"latest_commit_sha":null,"homepage":"https://github.com/overtrue/vue-avatar-cropper","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/overtrue.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"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},"funding":{"github":["overtrue"],"custom":"https://www.buymeacoffee.com/ferretwithberet"}},"created_at":"2017-07-19T10:37:51.000Z","updated_at":"2025-04-10T02:02:42.000Z","dependencies_parsed_at":"2024-02-17T06:32:08.751Z","dependency_job_id":"1385b721-294f-4d52-ae1d-841a95269407","html_url":"https://github.com/overtrue/vue-avatar-cropper","commit_stats":{"total_commits":609,"total_committers":17,"mean_commits":35.8235294117647,"dds":0.645320197044335,"last_synced_commit":"5e4d14f078b9e5ea5e4200d58e749b8ab2c59e5a"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/overtrue%2Fvue-avatar-cropper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/overtrue%2Fvue-avatar-cropper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/overtrue%2Fvue-avatar-cropper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/overtrue%2Fvue-avatar-cropper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/overtrue","download_url":"https://codeload.github.com/overtrue/vue-avatar-cropper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254414499,"owners_count":22067272,"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":["avatar-cropper","cropper","vue","vue-avatar","vue-avatar-cropper"],"created_at":"2024-08-02T20:01:39.642Z","updated_at":"2025-05-15T20:05:29.856Z","avatar_url":"https://github.com/overtrue.png","language":"JavaScript","funding_links":["https://github.com/sponsors/overtrue","https://www.buymeacoffee.com/ferretwithberet"],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003ch1\u003e\u003ca href=\"https://github.com/overtrue/vue-avatar-cropper\"\u003eVue Avatar Cropper\u003c/a\u003e\u003c/h1\u003e\n\n:girl: A simple and elegant component to crop and upload avatars.\n\n![image](https://user-images.githubusercontent.com/1472352/28398207-b32907b0-6d38-11e7-998a-32d34362b341.png)\n\n[![Edit Demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-avatar-cropper-for-vue3-i3c8v)\n\n## Basic usage\n\n```html\n\u003cbutton @click=\"showCropper = true\"\u003eSelect an image\u003c/button\u003e\n\n\u003cavatar-cropper\n v-model=\"showCropper\"\n upload-url=\"/files/upload\"\n @uploaded=\"handleUploaded\"\n/\u003e\n\n\u003cscript\u003e\n export default {\n data() {\n return {\n showCropper: false,\n }\n },\n methods: {\n handleUploaded({ form, request, response }) {\n // update user avatar attribute\n },\n },\n }\n\u003c/script\u003e\n```\n\n## Need more editing features?\n\nPintura the modern JavaScript Image Editor is what you're looking for. \n\nPintura supports setting crop aspect ratios, resizing, rotating, cropping, flipping images, and more.\n\n[Learn more about Pintura](https://pqina.nl/pintura/?ref=vue-avatar-cropper)\n\n[\u003cimg src=\"https://github.com/pqina/filepond-github-assets/blob/master/filepond_pintura.gif?raw=true\" width=\"600\" alt=\"\"/\u003e](https://pqina.nl/pintura/?ref=vue-avatar-cropper)\n\n## Installing\n\n### Browsers\n\n1. Include the link to AvatarCropper in `\u003chead\u003e` alongside [Vue.js](https://www.npmjs.com/package/vue), [Cropper.js](https://www.npmjs.com/package/cropperjs) and [Mime](https://www.npmjs.com/package/mime):\n\n ```html\n \u003clink\n rel=\"stylesheet\"\n href=\"https://unpkg.com/cropperjs@1.5.12/dist/cropper.min.css\"\n /\u003e\n \u003cscript src=\"https://unpkg.com/cropperjs@1.5.12/dist/cropper.js\"\u003e\u003c/script\u003e\n \u003cscript src=\"https://unpkg.com/vue@3/dist/vue.global.js\"\u003e\u003c/script\u003e\n \u003cscript src=\"https://unpkg.com/vue-avatar-cropper/dist/avatar-cropper.umd.js\"\u003e\u003c/script\u003e\n \u003cscript src=\"https://wzrd.in/standalone/mime%2flite@latest\"\u003e\u003c/script\u003e\n ```\n\n2. Add a trigger button and `\u003cavatar-cropper\u003e` to mount the component:\n\n```html\n\u003cbutton @click=\"showCropper = true\"\u003eSelect an image\u003c/button\u003e\n\n\u003cavatar-cropper\n v-model=\"showCropper\"\n upload-url=\"/files/upload\"\n @uploaded=\"handleUploaded\"\n/\u003e\n```\n\n3. Create Vue instance and register `AvatarCropper` component:\n\n```html\n\u003cscript\u003e\n Vue.createApp({\n el: '#app',\n\n data() {\n return {\n showCropper: false,\n }\n },\n\n methods: {\n handleUploaded(event) {\n console.log('avatar uploaded', event)\n },\n },\n })\n .use(AvatarCropper)\n .mount('#app')\n\u003c/script\u003e\n```\n\n### Node environment\n\n1. Install the AvatarCropper package:\n\n ```sh\n npm install vue-avatar-cropper\n\n # or\n yarn add vue-avatar-cropper\n ```\n\n2. Register it as you usually would:\n\n ```js\n import AvatarCropper from 'vue-avatar-cropper'\n\n // or\n const AvatarCropper = require('vue-avatar-cropper')\n\n Vue.component('AvatarCropper', AvatarCropper)\n\n // or\n Vue.use(AvatarCropper)\n\n // or\n new Vue({\n components: { AvatarCropper },\n // ...\n })\n ```\n\n### Props\n\n| Property Name | Type | Description |\n| ------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `modelValue` | Boolean | Set to true to show the avatar cropper, this prop is used for `v-model`. Default: `false` |\n| `file` | File | [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) to use instead of prompting the user to upload one |\n| `upload-url` | String | URL to upload the file to |\n| `upload-file-field` | String | [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) field to use for the file. Default: `'file'` |\n| `upload-file-name` | String/Function | File name to use for the [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) field. Can be `String` or `Function({ filename, mime, extension }) =\u003e String`. Default: Automatically determined from the uploaded [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File)'s `name` property and the extension of the output MIME. |\n| `upload-form-data` | FormData | Additional [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData). Default: `new FormData()` |\n| `upload-handler` | Function | Handler to replace default upload handler, the argument is [cropperJS](https://github.com/fengyuanchen/cropperjs) instance. |\n| `request-options` | Object | Options passed to the `init` parameter of the [Request()](https://developer.mozilla.org/en-US/docs/Web/API/Request/Request) constructor. Use this to set the method, headers, etc. Default: `{ method: 'POST' }` |\n| `cropper-options` | Object | Options passed to the [cropperJS](https://github.com/fengyuanchen/cropperjs#options) instance. \u003cbr\u003eDefault: `{` |\n| | | \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`aspectRatio: 1,` |\n| | | \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`autoCropArea: 1,` |\n| | | \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`viewMode: 1,` |\n| | | \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`movable: false,` |\n| | | \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`zoomable: false` |\n| | | `}` |\n| `output-options` | Object | Options passed to the [cropper.getCroppedCanvas()](https://github.com/fengyuanchen/cropperjs#getcroppedcanvasoptions) method. \u003cbr\u003eDefault: `{}`. Recommended use-case is specifying an output size, for instance: `{ width: 512, height: 512 }` |\n| `output-mime` | String | The resulting avatar image MIME type, if invalid `image/png` will be used. Default: `null` |\n| `output-quality` | Number | The resulting avatar image quality [0 - 1]. Default: `0.9`\u003cbr\u003e(if the output-mime property is `'image/jpeg'` or `'image/webp'`) |\n| `mimes` | String | Allowed image formats. Default: \u003cbr\u003e`'image/png, image/gif, image/jpeg, image/bmp, image/x-icon'` |\n| `capture` | String | Capture attribute for the file input. Forces mobile users to take a new picture with the back(Use value `'environment'`) or front(Use value `'user'`) camera |\n| `labels` | Object | Label for buttons. Default: `{ submit: 'Ok', cancel: 'Cancel' }` |\n| `inline` | Boolean | If true component will be displayed as inline elemenet. Default: `false` |\n\n### Events\n\n- **update:modelValue** `modelValue` prop changed, used for `v-model`, parameter:\n\n - `value` boolean.\n\n- **changed** user picked a file, parameter is an object containing:\n\n - `file` object, [File](https://developer.mozilla.org/zh-CN/docs/Web/API/File) object.\n - `reader` object, [FileReader](https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader)\n\n- **submit** right after a click on the submit button\n\n- **cancel** when user decides to cancel the upload\n\n- **uploading** before submit upload request, parameter is an object containing:\n\n - `form` object, [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) instance.\n - `request` object, [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) instance.\n - `response` object, [Promise](https://developer.mozilla.org/en-US/docs/Web/API/Promise) which resolves to a [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) instance.\n\n- **uploaded** after request is successful, parameter is an object containing:\n\n - `form` object, [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) instance.\n - `request` object, [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) instance.\n - `response` object, [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) instance.\n\n- **completed** after request has completed, parameter is an object containing:\n\n - `form` object, [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) instance.\n - `request` object, [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) instance.\n - `response` object, [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) instance.\n\n- **error** something went wrong, parameter is an object containing:\n - `message` error message.\n - `type` error type, example: `'load'`/`'upload'`/`'user'`.\n - `context` context data.\n\nYou can listen for these events like this:\n\n```html\n\u003cavatar-cropper\n v-model=\"showCropper\"\n upload-url=\"/files/upload\"\n @uploading=\"handleUploading\"\n @uploaded=\"handleUploaded\"\n @completed=\"handleCompleted\"\n @error=\"handleError\"\n/\u003e\n```\n\n```js\nexport default {\n //...\n methods: {\n ...\n handleUploading({ form, request, response }) {\n // show a loader\n },\n\n handleUploaded({ form, request, response }) {\n // update user avatar attribute\n },\n\n handleCompleted({ form, request, response }) {\n // close the loader\n },\n\n handleError({ message, type, context}) {\n if (type === 'upload') {\n const { request, response } = context\n }\n }\n },\n}\n```\n\n:rocket: There is an online demo:\n\n[![Edit test-project](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-avatar-cropper-for-vue3-i3c8v)\n\n## :heart: Sponsor me\n\n[![Sponsor me](https://github.com/overtrue/overtrue/blob/master/sponsor-me.svg?raw=true)](https://github.com/sponsors/overtrue)\n\n如果你喜欢我的项目并想支持它，[点击这里 :heart:](https://github.com/sponsors/overtrue)\n\n## Project supported by JetBrains\n\nMany thanks to Jetbrains for kindly providing a license for me to work on this and other open-source projects.\n\n[![](https://resources.jetbrains.com/storage/products/company/brand/logos/jb_beam.svg)](https://www.jetbrains.com/?from=https://github.com/overtrue)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fovertrue%2Fvue-avatar-cropper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fovertrue%2Fvue-avatar-cropper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fovertrue%2Fvue-avatar-cropper/lists"}