A Croppie wrapper for Vue.js 2.
npm install --save @idecardo/vue-croppie
<template>
<div>
<croppie ref="croppie"
@result="resultEventHandler"
@update="updateEventHandler">
</croppie>
<button @click="bind()">Bind</button>
<button @click="destroy()">Destroy</button>
<button @click="get()">Get</button>
<button @click="init()">Init</button>
<button @click="reset()">Reset</button>
<button @click="resultEvent()">Result via event</button>
<button @click="resultCallback()">Result via callback</button>
<button @click="rotate(90)">Rotate</button>
<button @click="setZoom(1)">Set Zoom</button>
</div>
</template>
<script>
import Croppie from '@idecardo/vue-croppie'
export default {
components: {
Croppie,
},
data: () => ({
image: 'https://i.imgur.com/ofHthFG.jpg',
result: null,
}),
mounted() {
this.$refs.croppie.bind({
url: this.image,
})
},
methods: {
bind() {
this.$refs.croppie.bind({
url: this.image,
})
},
destroy() {
this.$refs.croppie.destroy()
},
get() {
this.$refs.croppie.get()
},
init() {
this.$refs.croppie.init()
},
reset() {
this.$refs.croppie.reset()
},
resultEvent() {
this.$refs.croppie.result({
type: 'base64',
})
},
resultCallback() {
const options = {
type: 'base64',
format: 'jpeg',
}
this.$refs.croppie.result(options, (result) => {
this.result = result
})
},
resultEventHandler(result) {
this.result = result
},
rotate(degrees) {
this.$refs.croppie.rotate(degrees)
},
setZoom(value) {
this.$refs.croppie.setZoom(value)
},
updateEventHandler(detail) {
console.log(detail)
},
},
}
</script>All options and methods are as per the Croppie documentation, and can be customized using props.
<croppie ref="croppie"
:enable-orientation="false"
:enable-zoom="false"
:show-zoomer="false">
</croppie>| Name | Usage | Description |
|---|---|---|
result |
@result="handler" |
Triggered when a crop occurs. |
update |
@update="handler" |
Triggered when a drag or zoom occurs. |
resultevent is not available when a callback was passed to the result method.
You can also access methods from the component using Scoped Slots.
In order for croppie to initialize, you must create an element with
data-croppie="container"attribute anywhere within the default scoped slot.
<template>
<div id="app">
<croppie @result="resultEventHandler" @update="updateEventHandler">
<template slot-scope="{ bind, destroy, get, init, reset, result, rotate, setZoom }">
<!-- Required anywhere within the default scoped slot -->
<div data-croppie="container"></div>
<button @click="bind(bindOptions)">Bind</button>
<button @click="destroy()">Destroy</button>
<button @click="get(getCallbackHandler)">Get</button>
<button @click="init()">Init</button>
<button @click="reset()">Reset</button>
<button @click="result(resultOptions)">Result via event</button>
<button @click="result(resultOptions, resultCallbackHandler)">Result via callback</button>
<button @click="rotate(90)">Rotate</button>
<button @click="setZoom(1)">Set Zoom</button>
</template>
</croppie>
</div>
</template>
<script>
import Croppie from '@idecardo/vue-croppie'
export default {
components: {
Croppie,
},
data: () => ({
image: 'https://i.imgur.com/ofHthFG.jpg',
result: null,
}),
methods: {
getCallbackHandler(croppie) {
console.log(croppie)
},
resultCallbackHandler(result) {
this.result = result
},
resultEventHandler(result) {
this.result = result
},
updateEventHandler(detail) {
console.log(detail)
},
},
computed: {
bindOptions() {
return {
url: this.image,
}
},
resultOptions() {
return {
type: 'base64',
format: 'jpeg',
}
},
},
}
</script>