Client-side Image Editing In Vue – Image Markup

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')

Preview:

Client-side Image Editing In Vue - Image Markup

Changelog:

09/03/2020

  • Fix setTool(selectMode) bug

Download Details:

Author: lionix-team

Live Demo: https://image-markup.lionix-team.com/

Download Link: https://github.com/lionix-team/vue-image-markup/archive/master.zip

Official Website: https://github.com/lionix-team/vue-image-markup

Install & Download:

# Yarn
$ yarn add vue-image-markup

# NPM
$ npm i vue-image-markup --save

You Might Be Interested In:

Add Comment