{"id":17835079,"url":"https://github.com/namesmt/vue-modern-cropper","last_synced_at":"2025-04-02T12:44:42.482Z","repository":{"id":231154189,"uuid":"781069604","full_name":"NamesMT/vue-modern-cropper","owner":"NamesMT","description":"Power-packed wrapper over cropperjs@next","archived":false,"fork":false,"pushed_at":"2024-04-20T07:41:55.000Z","size":630,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-02T06:12:45.291Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://vue-modern-cropper.is-the.top/","language":"Vue","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/NamesMT.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":["NamesMT"]}},"created_at":"2024-04-02T17:33:36.000Z","updated_at":"2024-05-03T12:57:34.156Z","dependencies_parsed_at":"2024-04-02T18:51:49.913Z","dependency_job_id":"df32063d-bd4b-4db8-bb31-1b4e2a4ee8b6","html_url":"https://github.com/NamesMT/vue-modern-cropper","commit_stats":null,"previous_names":["namesmt/vue-modern-cropper"],"tags_count":20,"template":false,"template_full_name":"xiaoluoboding/vue-library-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NamesMT%2Fvue-modern-cropper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NamesMT%2Fvue-modern-cropper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NamesMT%2Fvue-modern-cropper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NamesMT%2Fvue-modern-cropper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NamesMT","download_url":"https://codeload.github.com/NamesMT/vue-modern-cropper/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246819750,"owners_count":20839094,"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":[],"created_at":"2024-10-27T20:16:46.691Z","updated_at":"2025-04-02T12:44:42.472Z","avatar_url":"https://github.com/NamesMT.png","language":"Vue","funding_links":["https://github.com/sponsors/NamesMT"],"categories":[],"sub_categories":[],"readme":"# Vue Modern Cropper\n\n[![NPM][npmBadge]][npmUrl]\n[![Minzip Package][bundlePhobiaBadge]][bundlePhobiaUrl]\n[![NPM Download][npmDtBadge]][npmDtUrl]\n\n[npmBadge]: https://img.shields.io/npm/v/vue-modern-cropper.svg?maxAge=2592000\n[npmUrl]: https://www.npmjs.com/package/vue-modern-cropper\n[npmDtBadge]: https://img.shields.io/npm/dt/vue-modern-cropper.svg\n[npmDtUrl]: https://www.npmjs.com/package/vue-modern-cropper\n[bundlePhobiaBadge]: https://img.shields.io/bundlephobia/minzip/vue-modern-cropper\n[bundlePhobiaUrl]: https://bundlephobia.com/package/vue-modern-cropper@latest\n\n\u003e Power-packed wrapper over cropperjs@next\n\n## Table of Contents\n\n\u003cdetails\u003e\n\n\u003csummary\u003eTOC\u003c/summary\u003e\n\n- [Vue Modern Cropper](#vue-modern-cropper)\n  - [Table of Contents](#table-of-contents)\n  - [NOTE!!](#note)\n  - [Usage](#usage)\n    - [Install](#install)\n    - [Use](#use)\n  - [License](#license)\n\n\u003c/details\u003e\n\n## NOTE!!\n`vue-modern-cropper` uses `cropperjs` (v2), you can check it's documentation [HERE](https://fengyuanchen.github.io/cropperjs/)\n\nAt its current state, `cropperjs` is not SSR-friendly, though, even if it's SSR-able, I think it would be better to render it client-only to avoid overhead on the server, so remember to wrap/mark the component as `ClientOnly` if your project have SSR-enabled.\n\nFeel free to submit PRs to add helper functions 😘.\n\n## Usage\n### Install\n```sh\npnpm add vue-modern-cropper\n```\n\n### Use\n\u003c!-- eslint-skip --\u003e\n```ts\n// Register it globally\nimport { ModernCropper } from 'vue-modern-cropper'\nVue.component(ModernCropper)\n\n/* SomeComponent.vue */\n// Or you could import it locally\nimport { ModernCropper } from 'vue-modern-cropper'\n\n// Use InstanceType to infer the exposed props\nconst cropper = ref\u003cInstanceType\u003ctypeof ModernCropper\u003e\u003e()\n// Or better, use `useTemplateRef` (vue 3.5+)\n// const cropper = useTemplateRef('cropper')\n\nonMounted(async () =\u003e {\n  // remember to await nextTick if you use Nuxt (Nuxt client-component caveat)\n  await nextTick()\n\n  // Use onCropperMounted to execute hooks as soon as the cropper APIs is available\n  cropper.value!.onCropperMounted(({ cropper, image, canvas, selection, selections }) =\u003e {\n    selection.$toCanvas().then(canvas =\u003e console.log('cropped:', canvas.toDataURL()))\n  })\n\n  // Or access them directly through the ref, you need to make sure they are available though\n  if (cropper.value.cropperMounted)\n    cropper.value.cropper\n})\n\n... // Somewhere in the \u003ctemplate\u003e:\n\u003cModernCropper\n  ref=\"cropper\"\n  class=\"w-80 h-40\"\n  :src=\"imgSrc\"\n  :pass-through=\"{\n    cropper: { constructOptions: undefined },\n    image: { attributes: { class: 'blur' } },\n    canvas: { attributes: { background: false } },\n    selection: { attributes: undefined },\n    selections: { attributes: undefined },\n  }\"\n/\u003e\n...\n\n```\n\n## License\n\nMIT [@NamesMT](https://github.com/NamesMT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnamesmt%2Fvue-modern-cropper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnamesmt%2Fvue-modern-cropper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnamesmt%2Fvue-modern-cropper/lists"}