npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-image-markup

v3.2.0

Published

vue-image-markup will provide you to edit uploaded image easily and save it.

Downloads

2,884

Readme

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