mejuliver / vue-imageeditor

vue image editor base on caman and advance cropper

vue-imageeditor

vue image editor base on camanjs and advance cropper

Installation

npm install --save @mejuliver/vue-imageeditor vue-advanced-cropper

the editor is using boostrap 4 for its UI so you need to add it also

npm install --save bootstrap@4.1.1

then import it

import 'bootstrap/dist/css/boostrap.min.css'

import the component

import imageeditor from '@mejuliver/vue-imageeditor/imageeditor.vue';

insert the component

<imageeditor @saveImage="saveImage" ref="image" accept=".jpg,.png" />

add vue instance as component and set a save image method

components : { imageeditor },
methods : {
  saveImage(e){
    this.imgpreview = e.src;
    this.fileimage = e.blob;         
  } 
}