Markup Image with Vue.js
vue-image-markup
will provide you to edit uploaded images easily and save it.
GitHub: https://github.com/lionix-team/vue-image-markup
NPM: https://www.npmjs.com/package/vue-image-markup
DEMO: https://image-markup.lionix-team.com/
Installation
npm i vue-image-markup
or
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 the 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"/>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
Function set(type
,params
)
With the set() function you choose editor’s mode, which should get two parameters type
and params
Editor has 6 modes
- text
- circle
- rect
- selectMode
- arrow
- freeDrawing
params
parameter must be an object which sets the type and every type have its own options.
Text Mode
set('text',params)
to enable text mode in editor, where params
must be an object and has its default value
this.$refs.editor.set('text')
Object keyDefault ValueDescriptionfillblack
colorfontFamilyArial
font-familyfontSize32
font-sizeplaceholderAdd Text
default text placeholder when the text will be added or you can customize your editor text mode styles by overwriting default values.
let textModeOptions = { 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 an object and has its default value
this.$refs.editor.set('circle')
Object keyDefault ValueDescriptionfilltransparent
Color inside circlestrokeblack
Circe border colorstrokeWidth7
Circle border widthdisableCircleEditingfalse
When false
, can be painted custom circles. When true
, always will be added circle of fixed height and widthtop0
Top position of an objectleft0
Left position of an objectradius20
Radius of the circlestrokeUniformtrue
When false
, the stroke width will scale with the object. When true
, the stroke will always match the exact pixel size entered for stroke widthnoScaleCachefalse
When true
, the cache does not get updated during scaling. The picture will get block if scaled too much and will be redrawn with correct details at the end of scaling. this setting is performance and application dependant
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 an object and has its default value
this.$refs.editor.set('rect')
Object keyDefault ValueDescriptionfilltransparent
Color inside rectanglestrokeblack
Rectangle is rendered via stroke and this property specifies its colorstrokeWidth7
Rectangle border widthangle0
Angle of rotation of an object (in degrees)width0
if rectangle width and height is not 0,editor disable editing rectangle and add the rectangles with fixed propertiesheight0
if rectangle width and height is not 0, editor disable editing rectangle and add the rectangles with fixed propertiestop0
Top position of rectangleleft0
Left position of rectangleopacity1
Opacity of rectanglestrokeUniformtrue
When false
, the stroke width will scale with the object. When true
, the stroke will always match the exact pixel size entered for stroke widthnoScaleCachefalse
When true
, cache does not get updated during scaling. The picture will get block if scaled too much and will be redrawn with correct details at the end of scaling. this setting is performance and application dependant
or you can customize your editor rectangle mode styles by overwriting default values.
let customizeRectangle = { fill: 'blue',stroke: 'white',strokeWidth: "5" }
this.$refs.editor.set('rect',customizeRectangle)
Select Mode
set('selectMode')
to enable select mode in the editor. This mode disables all other types of editing and enables select mode for a user can move, resize or rotate the 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 an object and has its default value
this.$refs.editor.set('arrow')
Object keyDefault ValueDescriptionstrokeblack
Arrow is rendered via stroke and this property specifies its colorstrokeWidth7
Arrow border widthstrokeUniformtrue
When false
, the stroke width will scale with the object. When true
, the stroke will always match the exact pixel size entered for stroke widthnoScaleCachefalse
When true
, the cache does not get updated during scaling. The picture will get blocky if scaled too much and will be redrawn with correct details at the end of scaling. this setting is performance and application dependant
or you can customize your editor’s arrow mode styles by overwriting default values.
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 an object and has its default value
this.$refs.editor.set('freeDrawing')
Object keyDefault ValueDescriptionstrokeblack
brush's colorstrokeWidth7
brush's width
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)
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 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
this.$refs.editor.undo()
Function redo()
With the help of redo() method, you will be able to restore your last object which has been removed
this.$refs.editor.redo()