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
or
yarn add vue-image-markup
Usage
First import the Editor component inside your Vue component.
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.
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
)
type
,params
)With the set() function you choose editor's mode,which should get two parameters type
and params
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
set('text',params)
to enable text mode in editor,where params
must be object and has it's default valueor you can customize your editor text mode styles by overwriting default values.
Circle Mode
set('circle',params)
to enable circle 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 valueor you can customize your editor circle mode styles by overwriting default values.
Rectangle Mode
set('rect',params)
to enable rect 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 valueSelect 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
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
parameterArrow Mode
set('arrow',params)
to enable arrow mode in editor,where params
must be object and has it's default value
set('arrow',params)
to enable arrow mode in editor,where params
must be object and has it's default valueFree Drawing Mode
set('freeDrawing',params)
to enable free drawing 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 valueor you can customize your editor's free drawing mode styles by overwriting default values.
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.
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.or you can customize your editor crop mode styles by overwriting default values.
If you choose the area which will be cropped,you must call applyCropping()
function.
Eraser Mode
set('eraser')
to enable eraser mode in editor, which will remove the object from editor when the object will be clicked.
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
setBackgroundImage(imageUrl)
to set editor background imageFunction uploadImage(e)
uploadImage(e)
to set background of canvas
uploadImage(e)
to set background of canvasFunction saveImage()
saveImage()
to save your image,which returns image in base64 format.
saveImage()
to save your image,which returns image in base64 format.Function clear()
clear()
function delete editor's all objects
clear()
function delete editor's all objectsFunction 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
Last updated