Vue Image Markup Editing Library Javascript With Vue.js

Vue image markup is a client-side image editor that allows you to crop images and draw text, shapes, and borders on your image easily and save it.

image editing library javascript, how to share image on web, navigator share image, javascript share image, js image editor, simple javascript image editor, free javascript image editor

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-image-markup

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

1. Import image markup.

import Editor from 'vue-image-markup';

2. Add Image Markup to the app.

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

3. Enable editing modes:

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

Client-side Image Editing, Markup Image with Vue.js Plugin/Github


See Demo And Download

Official Website(lionix-team): Click Here

This superior jQuery/javascript plugin is developed by lionix-team. For extra Advanced Usage, please go to the official website.

Share