https://github.com/namesmt/vue-modern-cropper
Power-packed wrapper over cropperjs@next
https://github.com/namesmt/vue-modern-cropper
Last synced: about 1 year ago
JSON representation
Power-packed wrapper over cropperjs@next
- Host: GitHub
- URL: https://github.com/namesmt/vue-modern-cropper
- Owner: NamesMT
- License: mit
- Created: 2024-04-02T17:33:36.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-20T07:41:55.000Z (about 2 years ago)
- Last Synced: 2024-05-02T06:12:45.291Z (about 2 years ago)
- Language: Vue
- Homepage: https://vue-modern-cropper.is-the.top/
- Size: 615 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Vue Modern Cropper
[![NPM][npmBadge]][npmUrl]
[![Minzip Package][bundlePhobiaBadge]][bundlePhobiaUrl]
[![NPM Download][npmDtBadge]][npmDtUrl]
[npmBadge]: https://img.shields.io/npm/v/vue-modern-cropper.svg?maxAge=2592000
[npmUrl]: https://www.npmjs.com/package/vue-modern-cropper
[npmDtBadge]: https://img.shields.io/npm/dt/vue-modern-cropper.svg
[npmDtUrl]: https://www.npmjs.com/package/vue-modern-cropper
[bundlePhobiaBadge]: https://img.shields.io/bundlephobia/minzip/vue-modern-cropper
[bundlePhobiaUrl]: https://bundlephobia.com/package/vue-modern-cropper@latest
> Power-packed wrapper over cropperjs@next
## Table of Contents
TOC
- [Vue Modern Cropper](#vue-modern-cropper)
- [Table of Contents](#table-of-contents)
- [NOTE!!](#note)
- [Usage](#usage)
- [Install](#install)
- [Use](#use)
- [License](#license)
## NOTE!!
`vue-modern-cropper` uses `cropperjs` (v2), you can check it's documentation [HERE](https://fengyuanchen.github.io/cropperjs/)
At 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.
Feel free to submit PRs to add helper functions 😘.
## Usage
### Install
```sh
pnpm add vue-modern-cropper
```
### Use
```ts
// Register it globally
import { ModernCropper } from 'vue-modern-cropper'
Vue.component(ModernCropper)
/* SomeComponent.vue */
// Or you could import it locally
import { ModernCropper } from 'vue-modern-cropper'
// Use InstanceType to infer the exposed props
const cropper = ref>()
// Or better, use `useTemplateRef` (vue 3.5+)
// const cropper = useTemplateRef('cropper')
onMounted(async () => {
// remember to await nextTick if you use Nuxt (Nuxt client-component caveat)
await nextTick()
// Use onCropperMounted to execute hooks as soon as the cropper APIs is available
cropper.value!.onCropperMounted(({ cropper, image, canvas, selection, selections }) => {
selection.$toCanvas().then(canvas => console.log('cropped:', canvas.toDataURL()))
})
// Or access them directly through the ref, you need to make sure they are available though
if (cropper.value.cropperMounted)
cropper.value.cropper
})
... // Somewhere in the :
...
```
## License
MIT [@NamesMT](https://github.com/NamesMT)