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