• Vue Image Cropper

Vue Image Cropper

Vue image cropper working example on codesandbox.

Component installation

to install the component you must have npm. Navigate to the root of your project, and enter the command below

npm i @jsuites/cropper

Cropper component

<template>
    <div ref="cropper" style="border: 1px solid #ccc"></div>
</template>
    
<script>
import cropper from "@jsuites/cropper";
import "@jsuites/cropper/cropper.css";

export default {
    name: "Cropper",
    props: {
        properties: Object,
    },
    mounted: function () {
        cropper(this.$refs.cropper, this.$props.properties);
    },
};
</script>

Component usage

<template>
    <div id="app">
        <h3>Select a image</h3>
        <span>image url: {{ value }} </span>
        <Cropper
            v-bind:properties="{
                value: value,
                onchange: handleCropperChange,
                area: [300, 250],
                crop: [200, 200],
                allowResize: true,
            }"
        />
    </div>
</template>

<script>
import Cropper from "./components/Cropper";

export default {
    name: "App",
    components: {
        Cropper,
    },
    data: function () {
        return {
            value: "",
        };
    },
    methods: {
        setValue: function (newValue) {
            this.value = newValue;
        },
        handleCropperChange: function (el, imgEl) {
            this.setValue(imgEl.src);
        },
    },
};
</script>