Vue Modern Cropper

Power-packed wrapper over cropperjs@next

Table of Contents

TOC

• Vue Modern Cropper
  • Table of Contents
  • NOTE!!
  • Usage
    • Install
    • Use
  • License

NOTE!!

vue-modern-cropper uses cropperjs@next (v2), which is not yet stable release, you can check it's documentation HERE

As it 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 it wrap/mark the component as ClientOnly if your project have SSR-enabled.

Feel free to submit PRs to add helper functions 😘.

Usage

Install

1pnpm add vue-modern-cropper

Use

1// Register it globally
2import { ModernCropper } from 'vue-modern-cropper'
3Vue.component(ModernCropper)
4
5/* SomeComponent.vue */
6// Or you could import it locally
7import { ModernCropper } from 'vue-modern-cropper'
8
9// Use InstanceType to infer the exposed props
10const cropper = ref<InstanceType<typeof ModernCropper>>()
11
12onMounted(async () => {
13  // remember to await nextTick if you use Nuxt (Nuxt client component caveat)
14  await nextTick()
15
16  // Use onCropperMounted to execute hooks as soon as the cropper APIs is available
17  cropper.value!.onCropperMounted(({ cropper, image, canvas, selection, selections }) => {
18    selection.$toCanvas().then(canvas => console.log('cropped:', canvas.toDataURL()))
19  })
20
21  // Or access them directly through the ref, you need to make sure they are available though
22  if (cropper.value.cropperMounted)
23    cropper.value.cropper
24})
25...
26<ModernCropper
27  ref="cropper"
28  class="w-80 h-40"
29  :src="imgSrc"
30  :pass-through="{
31    cropper: { constructOptions: undefined },
32    image: { attributes: { class: 'blur' } },
33    canvas: { attributes: { background: false } },
34    selection: { attributes: undefined },
35    selections: { attributes: undefined },
36  }"
37/>
38...
39

License

MIT @NamesMT