Markup Image with Vue.js

vue-image-markup will provide you to edit uploaded image easily and save it.

Installation

npm i vue-image-markup

yarn add vue-image-markup

Usage

First import the Editor component inside your Vue component.

 import Editor from 'vue-image-markup';

Then you'll be able to use Editor component.

Example:

You must give your editor component ref,which will help you to call the functions to set editor mode,clean objects or undo/redo your changes.

<Editor :canvasWidth="canvasWidth" :canvasHeight="canvasHeight" ref="editor" editorId="canvasId"/>

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

canvasWidth prop will set editor width

canvasHeight prop will set editor height

ref with the help of ref, you will control the editor

editorId (optional) will set editor id, allowing the use of multiple editors in the same component

Function set(`type`,`params`)

With the set() function you choose editor's mode,which should get two parameters `type` and `params`

Editor have 7 modes

text
circle
rect
selectMode
arrow
freeDrawing
crop
eraser

params parameter must be an object which set the type and every type have it's own options.

Text Mode

`set('text',params)` to enable text mode in editor,where `params` must be object and has it's default value

this.$refs.editor.set('text')

or you can customize your editor text mode styles by overwriting default values.

 let textModeOptions = { id: 'title', fill: 'red', fontFamily: 'Verdana',fontSize: 16, placeholder: 'Type something'}
 this.$refs.editor.set('text',textModeOptions)

Circle Mode

`set('circle',params)` to enable circle mode in editor,where `params` must be object and has it's default value

this.$refs.editor.set('circle')

or you can customize your editor circle mode styles by overwriting default values.

 let circleModeParams = { fill: 'blue',stroke: 'white' }
 this.$refs.editor.set('circle',circleModeParams)

Rectangle Mode

`set('rect',params)` to enable rect mode in editor,where `params` must be object and has it's default value

this.$refs.editor.set('rect')

 let customizeRectangle = { fill: 'blue',stroke: 'white',strokeWidth: "5" }
 this.$refs.editor.set('rect',customizeRectangle)

Select Mode

`set('selectMode')` to enable select mode in editor. This mode disable all other types editing and enable select mode for user can move,resize or rotate selected object.This function hasn't `params` parameter

this.$refs.editor.set('selectMode')

Arrow Mode

`set('arrow',params)` to enable arrow mode in editor,where `params` must be object and has it's default value

this.$refs.editor.set('arrow')

 let customizeArrow = { stroke: 'red',strokeWidth: "3" }
 this.$refs.editor.set('arrow',customizeArrow)

Free Drawing Mode

`set('freeDrawing',params)` to enable free drawing mode in editor,where `params` must be object and has it's default value

this.$refs.editor.set('freeDrawing')

or you can customize your editor's free drawing mode styles by overwriting default values.

 let customizeFreeDrawing = { stroke: 'yellow',strokeWidth: "5" }
 this.$refs.editor.set('freeDrawing',customizeFreeDrawing)

Crop Mode

`set('crop')` to enable crop mode in editor,where `params` must be cropper's parameters and has it's default value. After calling the function, the cropper will be shown in editor.

this.$refs.editor.set('crop',params)

or you can customize your editor crop mode styles by overwriting default values.

 let cropModeOptions = { width: '50', height: '100', overlayOpacity: '0.9'}
 this.$refs.editor.set('crop',cropModeOptions)

If you choose the area which will be cropped,you must call applyCropping() function.

this.$refs.editor.applyCropping()

Eraser Mode

`set('eraser')` to enable eraser mode in editor, which will remove the object from editor when the object will be clicked.

this.$refs.editor.set('eraser')

Function setBackgroundImage(imageUrl)

`setBackgroundImage(imageUrl)` to set editor background image

data(){
    return{
        imageUrl:"example.png"
     }
},
mounted:{    
    this.$refs.editor.setBackgroundImage(this.imageUrl);
}

Function uploadImage(e)

`uploadImage(e)` to set background of canvas

 this.$refs.editor.uploadImage(e)

Function saveImage()

`saveImage()` to save your image,which returns image in base64 format.

 this.$refs.editor.saveImage()

Function clear()

`clear()` function delete editor's all objects

 this.$refs.editor.clear()

Function undo()

With the help of undo() function you will be able to remove your last object you have added

Function redo()

With the help of redo() method you will be able to restore your last object which have been removed

Function getObjectsById(id)

With the help of getObjectsById(id) method you will be able to get object by id

 this.$refs.editor.getObjectsById('title')

Credits

PreviousMarkup Image with React.js NextReact Lazy Props

Last updated 3 years ago

Installation

Usage

Example:

Function set(type,params)

With the set() function you choose editor's mode,which should get two parameters type and params

Text Mode

set('text',params) to enable text mode in editor,where params must be object and has it's default value

Circle Mode

set('circle',params) to enable circle mode in editor,where params must be object and has it's default value

Rectangle Mode

set('rect',params) to enable rect mode in editor,where params must be object and has it's default value

Select Mode

set('selectMode') to enable select mode in editor. This mode disable all other types editing and enable select mode for user can move,resize or rotate selected object.This function hasn't params parameter

Arrow Mode

set('arrow',params) to enable arrow mode in editor,where params must be object and has it's default value

Free Drawing Mode

set('freeDrawing',params) to enable free drawing mode in editor,where params must be object and has it's default value

Crop Mode

set('crop') to enable crop mode in editor,where params must be cropper's parameters and has it's default value. After calling the function, the cropper will be shown in editor.

Eraser Mode

set('eraser') to enable eraser mode in editor, which will remove the object from editor when the object will be clicked.

Function setBackgroundImage(imageUrl)

setBackgroundImage(imageUrl) to set editor background image

Function uploadImage(e)

uploadImage(e) to set background of canvas

Function saveImage()

saveImage() to save your image,which returns image in base64 format.

Function clear()

clear() function delete editor's all objects

Function undo()

With the help of undo() function you will be able to remove your last object you have added

Function redo()

With the help of redo() method you will be able to restore your last object which have been removed

Function getObjectsById(id)

With the help of getObjectsById(id) method you will be able to get object by id

Credits

Installation

Usage

Example:

Function set(type,params)

With the set() function you choose editor's mode,which should get two parameters type and params

Text Mode

set('text',params) to enable text mode in editor,where params must be object and has it's default value

Circle Mode

set('circle',params) to enable circle mode in editor,where params must be object and has it's default value

Rectangle Mode

set('rect',params) to enable rect mode in editor,where params must be object and has it's default value

Select Mode

set('selectMode') to enable select mode in editor. This mode disable all other types editing and enable select mode for user can move,resize or rotate selected object.This function hasn't params parameter

Arrow Mode

set('arrow',params) to enable arrow mode in editor,where params must be object and has it's default value

Free Drawing Mode

set('freeDrawing',params) to enable free drawing mode in editor,where params must be object and has it's default value

Crop Mode

set('crop') to enable crop mode in editor,where params must be cropper's parameters and has it's default value. After calling the function, the cropper will be shown in editor.

Eraser Mode

set('eraser') to enable eraser mode in editor, which will remove the object from editor when the object will be clicked.

Function setBackgroundImage(imageUrl)

setBackgroundImage(imageUrl) to set editor background image

Function uploadImage(e)

uploadImage(e) to set background of canvas

Function saveImage()

saveImage() to save your image,which returns image in base64 format.

Function clear()

clear() function delete editor's all objects

Function undo()

With the help of undo() function you will be able to remove your last object you have added

Function redo()

With the help of redo() method you will be able to restore your last object which have been removed

Function getObjectsById(id)

With the help of getObjectsById(id) method you will be able to get object by id

Credits

Function set(`type`,`params`)

With the set() function you choose editor's mode,which should get two parameters `type` and `params`

`set('text',params)` to enable text mode in editor,where `params` must be object and has it's default value

`set('circle',params)` to enable circle mode in editor,where `params` must be object and has it's default value

`set('rect',params)` to enable rect mode in editor,where `params` must be object and has it's default value

`set('selectMode')` to enable select mode in editor. This mode disable all other types editing and enable select mode for user can move,resize or rotate selected object.This function hasn't `params` parameter

`set('arrow',params)` to enable arrow mode in editor,where `params` must be object and has it's default value

`set('freeDrawing',params)` to enable free drawing mode in editor,where `params` must be object and has it's default value

`set('crop')` to enable crop mode in editor,where `params` must be cropper's parameters and has it's default value. After calling the function, the cropper will be shown in editor.

`set('eraser')` to enable eraser mode in editor, which will remove the object from editor when the object will be clicked.

`setBackgroundImage(imageUrl)` to set editor background image

`uploadImage(e)` to set background of canvas

`saveImage()` to save your image,which returns image in base64 format.

`clear()` function delete editor's all objects

Function set(`type`,`params`)

With the set() function you choose editor's mode,which should get two parameters `type` and `params`

`set('text',params)` to enable text mode in editor,where `params` must be object and has it's default value

`set('circle',params)` to enable circle mode in editor,where `params` must be object and has it's default value

`set('rect',params)` to enable rect mode in editor,where `params` must be object and has it's default value

`set('selectMode')` to enable select mode in editor. This mode disable all other types editing and enable select mode for user can move,resize or rotate selected object.This function hasn't `params` parameter

`set('arrow',params)` to enable arrow mode in editor,where `params` must be object and has it's default value

`set('freeDrawing',params)` to enable free drawing mode in editor,where `params` must be object and has it's default value

`set('crop')` to enable crop mode in editor,where `params` must be cropper's parameters and has it's default value. After calling the function, the cropper will be shown in editor.

`set('eraser')` to enable eraser mode in editor, which will remove the object from editor when the object will be clicked.

`setBackgroundImage(imageUrl)` to set editor background image

`uploadImage(e)` to set background of canvas

`saveImage()` to save your image,which returns image in base64 format.

`clear()` function delete editor's all objects