Power-packed wrapper over cropperjs@next
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 😘.
pnpm add vue-modern-cropper// 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<InstanceType<typeof ModernCropper>>()
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
})
...
<ModernCropper
ref="cropper"
class="w-80 h-40"
:src="imgSrc"
:pass-through="{
cropper: { constructOptions: undefined },
image: { attributes: { class: 'blur' } },
canvas: { attributes: { background: false } },
selection: { attributes: undefined },
selections: { attributes: undefined },
}"
/>
...MIT @NamesMT