Vue Modern Cropper

It's mid 2024, I've been searching, installing, and trying all, everything, but I can't find a maintained/bug-free, easy to use cropper component library for Vue -- (╯°□°)╯︵ ┻━┻
So I created this.

Power-packed wrapper over cropperjs@next

Table of Contents

TOC

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

NOTE!!

vue-modern-cropper is a small wrapper over cropperjs (v2), improving ease of use and DX, while still preversing it's full customizability power, you can check it's documentation HERE

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 improve DX even more 😘.

Features

• 🔥 Import and use, typed component with discriminated union support

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// Or better, use `useTemplateRef` (vue 3.5+)
12// const cropper = useTemplateRef('cropper')
13
14onMounted(async () => {
15  // remember to await nextTick if you use Nuxt (Nuxt client-component caveat)
16  await nextTick()
17
18  // Use onCropperMounted to execute hooks as soon as the cropper APIs is available
19  cropper.value!.onCropperMounted(({ cropper, image, canvas, selection, selections }) => {
20    selection.$toCanvas().then(canvas => console.log('cropped:', canvas.toDataURL()))
21  })
22
23  // Or access them directly through the ref, you need to make sure they are available though
24  if (cropper.value.cropperMounted)
25    cropper.value.cropper
26})
27
28... // Somewhere in the <template>:
29<ModernCropper
30  ref="cropper"
31  class="w-80 h-40"
32  :src="imgSrc"
33  :pass-through="{
34    cropper: { constructOptions: undefined },
35    image: { attributes: { class: 'blur' } },
36    canvas: { attributes: { background: false } },
37    selection: { attributes: { id: 'cropper-selection-86' } },
38    selections: { attributes: undefined },
39  }"
40/>
41
42// Tips: to use custom cropper components without setting `isCustomElement` config:
43<component 
44  v-if="cropper?.cropperMounted" 
45  :is="h('cropper-viewer', { selection: '#cropper-selection-86' })"
46/>
47...
48

License

MIT @NamesMT