Press "Enter" to skip to content

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

Full-Featured Photo Image Editor Using Canvas | tui.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, image processing in html


See Demo And Download

Official Website(lionix-team): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *