Vue2ImageEditor

Vue2ImageEditor Component for Vue 2.x

Install

    npm install vue2-image-editor --save

Demo

For demo, please see here

Usage

1. Import the component

import Vue2ImageEditor from 'vue2-image-editor';

2.1 Use it globally

Vue.use(Vue2ImageEditor);

2.2 Or use it locally

components: {
    'vue2-image-editor': Vue2ImageEditor
},

3. Update your app or template:

<div>
...
<vue2-image-editor></vue2-image-editor>
...
</div>

Properties

• url: String

• aspect: Number

• maxWidth: Number (default: 1024)

• maxHeight: Number (default: 768)

• clientHeight: String (default: 500px)

Example

<template>
    <div>
        <vue2-image-editor :url="img" ref="editor"></vue2-image-editor>

        <button class="btn btn-default btn-sm" type="button" @click="save">save</button>
    </div>
</template>

<script>
    import Vue2ImageEditor from '../src/index';

    export default {
        name: 'app',
        data() {
            return {
                img: 'test.png',
            }
        },
        components: {
            Vue2ImageEditor
        },
        methods: {
            save(){
                console.log("data: ", this.$refs.editor.save());
            }
        },
    }
</script>

Contributing

Contributions are welcome

Build Setup

# install dependencies
npm install
 
# serve with hot reload at localhost:8080
npm run dev
 
# build for production with minification
npm run build