Markup Image with Vue.js

Sergey Karakhanyan
Dec 26, 2019 · 4 min read

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 ValueDescriptionfillblackcolorfontFamilyArialfont-familyfontSize32font-sizeplaceholderAdd Textdefault 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 ValueDescriptionfilltransparentColor inside circlestrokeblackCirce border colorstrokeWidth7Circle border widthdisableCircleEditingfalseWhen false, can be painted custom circles. When true, always will be added circle of fixed height and widthtop0Top position of an objectleft0Left position of an objectradius20Radius of the circlestrokeUniformtrueWhen false, the stroke width will scale with the object. When true, the stroke will always match the exact pixel size entered for stroke widthnoScaleCachefalseWhen 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 ValueDescriptionfilltransparentColor inside rectanglestrokeblackRectangle is rendered via stroke and this property specifies its colorstrokeWidth7Rectangle border widthangle0Angle of rotation of an object (in degrees)width0if rectangle width and height is not 0,editor disable editing rectangle and add the rectangles with fixed propertiesheight0if rectangle width and height is not 0, editor disable editing rectangle and add the rectangles with fixed propertiestop0Top position of rectangleleft0Left position of rectangleopacity1Opacity of rectanglestrokeUniformtrueWhen false, the stroke width will scale with the object. When true, the stroke will always match the exact pixel size entered for stroke widthnoScaleCachefalseWhen 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 ValueDescriptionstrokeblackArrow is rendered via stroke and this property specifies its colorstrokeWidth7Arrow border widthstrokeUniformtrueWhen false, the stroke width will scale with the object. When true, the stroke will always match the exact pixel size entered for stroke widthnoScaleCachefalseWhen 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 ValueDescriptionstrokeblackbrush's colorstrokeWidth7brush'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()

Credits

The Startup

Get smarter at building your thing. Join The Startup’s +788K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Sergey Karakhanyan

Written by

CEO @ lionix

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +788K followers.

Sergey Karakhanyan

Written by

CEO @ lionix

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +788K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store