Neolithic Populous Metropolis

    vue-image-markup

    3.2.0 • Public • Published

    Markup Image with Vue.js (customizable)

    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.

     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')
    Object key Default Value Description
    fill black color
    fontFamily Arial font-family
    fontSize 32 font-size
    fontWeight 100 font-weight(100,200,300,400,500,600,700,bold,normal)
    fontStyle normal font-style(normal,italic,oblique)
    placeholder Add Text 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.

     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')
    Object key Default Value Description
    fill transparent Color inside circle
    stroke black Circe border color
    strokeWidth 7 Circle border width
    disableCircleEditing false When false, can be painted custom circle. When true, always will be added circle of fixed height and width
    top 0 Top position of an object
    left 0 Left position of an object
    radius 20 Radius of the circle
    strokeUniform true When false, the stoke width will scale with the object. When true, the stroke will always match the exact pixel size entered for stroke width
    noScaleCache false 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
    id '' Circle id

    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')
    Object key Default Value Description
    fill transparent Color inside rectangle
    stroke black Rectangle is rendered via stroke and this property specifies its color
    strokeWidth 7 Rectangle border width
    angle 0 Angle of rotation of an object (in degrees)
    width 0 if rectangle width and height is not 0,editor disable editing rectangle and add the rectangles with fixed properties
    height 0 if rectangle width and height is not 0,editor disable editing rectangle and add the rectangles with fixed properties
    top 0 Top position of rectangle
    left 0 Left position of rectangle
    opacity 1 Opacity of rectangle
    strokeUniform true When false, the stoke width will scale with the object. When true, the stroke will always match the exact pixel size entered for stroke width
    noScaleCache false 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
    id '' Rectangle id

    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 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')
    Object key Default Value Description
    stroke black Arrow is rendered via stroke and this property specifies its color
    strokeWidth 7 Arrow border width
    strokeUniform true When false, the stroke width will scale with the object. When true, the stroke will always match the exact pixel size entered for stroke width
    noScaleCache false When true, 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
    id '' Arrow id

    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 object and has it's default value
    this.$refs.editor.set('freeDrawing')
    Object key Default Value Description
    stroke black brush's color
    strokeWidth 7 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)

    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)  
    Object key Default Value Description
    width 200 cropper's width
    height 200 cropper's height
    overlayColor #000 color of background overlay
    overlayOpacity 0.7 opacity of background overlay
    transparentCorner false when set to true, cropper's controlling corners are rendered as transparent inside
    hasRotatingPoint false when set to false, cropper's controlling rotating point will not be visible or selectable
    hasControls true when set to false, cropper's controls are not displayed and can not be used to manipulate object
    cornerSize 10 size of cropper's controlling corners (in pixels)
    borderColor #000 color of controlling borders of cropper (when it's active)
    cornerColor #000 color of controlling corners of the cropper (when it's active)
    cornerStyle circle specify style of control, 'rect' or 'circle'

    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
     this.$refs.editor.undo()

    Function redo()

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

    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

    Install

    npm i vue-image-markup

    DownloadsWeekly Downloads

    412

    Version

    3.2.0

    License

    MIT

    Unpacked Size

    72.6 kB

    Total Files

    9

    Last publish

    Collaborators

    • gharutyunyan
    • lilit_simonyan