Client-side Image Editing In Vue - Image Markup

Install & Download:

# Yarn
$ yarn add vue-image-markup
# NPM
$ npm i vue-image-markup --save

Description:

Image Markup is a client-side image editing that allows you to crop images and draw text, shapes, and strokes on your images.

Basic Usage:

1. Import the Image Markup.

import Editor from 'vue-image-markup';

2. Add the Image Markup to the app.

<Editor :canvasWidth="Width" :canvasHeight="Height" ref="editor" :editorId="1" />

3. Enable the editing modes:

text
circle
rect
selectMode
arrow
freeDrawing
crop

mounted() {
  $this.$refs.editor.set(this.editor.mode,this.editor.options);
}

4. Methods.

// set image 
this.$refs.editor.uploadImage(e)
// save image in base64 format
this.$refs.editor.saveImage()
// clear
this.$refs.editor.clear()
// undo
this.$refs.editor.undo()
// redo
this.$refs.editor.redo()
// get object by id
this.$refs.editor.getObjectsById('title')