Markup Image with Vue.js
Last updated
Last updated
vue-image-markup
will provide you to edit uploaded image easily and save it.
npm i vue-image-markup
or
yarn add vue-image-markup
First import the Editor component inside your Vue component.
Then you'll be able to use Editor component.
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
type
,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.
set('text',params)
to enable text mode in editor,where params
must be object and has it's default valueObject key | Default Value | Description |
fill |
| color |
fontFamily |
| font-family |
fontSize |
| font-size |
fontWeight |
| font-weight( |
fontStyle |
| font-style( |
placeholder |
| default text placeholder when the text will be added |
id |
| text id |
or you can customize your editor text mode styles by overwriting default values.
set('circle',params)
to enable circle mode in editor,where params
must be object and has it's default valueObject key | Default Value | Description |
fill |
| Color inside circle |
stroke |
| Circe border color |
strokeWidth |
| Circle border width |
disableCircleEditing |
| When |
top |
| Top position of an object |
left |
| Left position of an object |
radius |
| Radius of the circle |
strokeUniform |
| When |
noScaleCache |
| When |
id |
| Circle id |
or you can customize your editor circle mode styles by overwriting default values.
set('rect',params)
to enable rect mode in editor,where params
must be object and has it's default valueObject key | Default Value | Description |
fill |
| Color inside rectangle |
stroke |
| Rectangle is rendered via stroke and this property specifies its color |
strokeWidth |
| Rectangle border width |
angle |
| Angle of rotation of an object (in degrees) |
width |
| if rectangle width and height is not 0,editor disable editing rectangle and add the rectangles with fixed properties |
height |
| if rectangle width and height is not 0,editor disable editing rectangle and add the rectangles with fixed properties |
top |
| Top position of rectangle |
left |
| Left position of rectangle |
opacity |
| Opacity of rectangle |
strokeUniform |
| When |
noScaleCache |
| When |
id |
| Rectangle id |
or you can customize your editor rectangle mode styles by overwriting default values. |
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
parameterset('arrow',params)
to enable arrow mode in editor,where params
must be object and has it's default valueObject key | Default Value | Description |
stroke |
| Arrow is rendered via stroke and this property specifies its color |
strokeWidth |
| Arrow border width |
strokeUniform |
| When |
noScaleCache |
| When |
id |
| Arrow id |
or you can customize your editor's arrow mode styles by overwriting default values. |
set('freeDrawing',params)
to enable free drawing mode in editor,where params
must be object and has it's default valueObject key | Default Value | Description |
stroke |
| brush's color |
strokeWidth |
| brush's width |
or you can customize your editor's free drawing mode styles by overwriting default values.
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.Object key | Default Value | Description |
width |
| cropper's width |
height |
| cropper's height |
overlayColor |
| color of background overlay |
overlayOpacity |
| opacity of background overlay |
transparentCorner |
| when set to |
hasRotatingPoint |
| when set to |
hasControls |
| when set to |
cornerSize |
| size of cropper's controlling corners (in pixels) |
borderColor |
| color of controlling borders of cropper (when it's active) |
cornerColor |
| color of controlling corners of the cropper (when it's active) |
cornerStyle |
| specify style of control, 'rect' or 'circle' |
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.
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 imageuploadImage(e)
to set background of canvassaveImage()
to save your image,which returns image in base64 format.clear()
function delete editor's all objects