Description:
A Vue 3/2 component that allows drawing on an HTML5 canvas using JavaScript. Text/image watermark is supported.
How to use it:
1. Import and register the drawing canvas component.
import VueDrawingCanvas from "vue-drawing-canvas";
export default {
components: {
VueDrawingCanvas,
},
// ...
}2. Add the component to the template.
<template>
<vue-drawing-canvas
ref="VueCanvasDrawing"
/>
</template>3. Available component props.
strokeType: {
type: String,
validator: (value: string) => {
return ['dash', 'square', 'circle', 'triangle', 'half_triangle'].indexOf(value) !== -1
},
default: () => 'dash'
},
fillShape: {
type: Boolean,
default: () => false
},
width: {
type: [String, Number],
default: () => 600
},
height: {
type: [String, Number],
default: () => 400
},
image: {
type: String,
default: () => ''
},
eraser: {
type: Boolean,
default: () => false
},
color: {
type: String,
default: () => '#000000'
},
lineWidth: {
type: Number,
default: () => 5
},
lock: {
type: Boolean,
default: () => false
},
styles: {
type: [Array, String, Object],
},
classes: {
type: [Array, String, Object],
},
backgroundColor: {
type: String,
default: () => '#FFFFFF'
},
backgroundImage: {
type: String,
default: () => null
},
watermark: {
// Specifies your watermark type. Type can be either "Text" or "Image"
//
// type: String
// required: true
// validator: (value) => { return ["Text", "Image"].includes(value) }
type: "Text",
// Specifies your watermark source
// If type is "Text" enter your watermark text here
// if type if "Image" enter your uploaded file createObjectURL(event.target.files[0]) Work best with .png file
//
// type: String
// required: true
source: "Watermark",
// The x-axis coordinate of the point at which to begin drawing the watermark,
// in pixels
//
// type: Number
// required: true
x: 200,
// The y-axis coordinate of the point at which to begin drawing the watermark,
// in pixels
//
// type: Number
// required: true
y: 180,
// Specifies width and height for your watermark image
//
// type: Object
// required: false
imageStyle: {
// The width to draw the image in the canvas
//
// type: Number
// required: false
// default: () => this.width
width: 600,
// The height to draw the image in the canvas
//
// type: Number
// required: false
// default: () => this.height
height: 400
},
// Specifies text style for your watermark
//
// type: Object
// required: false
fontStyle: {
// The maximum number of pixels wide the text may be once rendered.
// If not specified, there is no limit to the width of the text.
//
// type: Number
// required: false
width: 200,
// Sets the height of text in pixels. Usually this value has same value with font
//
// type: Number
// required: false
// default: () => 20
lineHeight: 48,
// Specifies the color, gradient, or pattern to use for the text
//
// type: String
// required: false
// default: () => '#000000'
color: '#FF0000',
// Specifies the current text style to use when drawing text.
// font: '{fontWeight} {fontSize} {fontFamily}'
//
// type: String
// required: false
// default: () => '20px serif'
font: 'bold 48px serif',
// Specifies drawing type to use when drawing text.
//
// type: String
// required: false
// validator: (value) => { return ["fill", "stroke"].includes(value) }
// default: () => 'fill'
drawType: 'fill',
// Specifies the current text alignment used when drawing text
// The alignment is relative to the x value
//
// type: String
// required: false
// validator: (value) => { return ["left", "right", "center", "start", "end"].includes(value) }
// default: () => 'start'
textAlign: 'left',
// Specifies the current text baseline used when drawing text
//
// type: String
// required: false
// validator: (value) => { return ["top", "hanging", "middle", "alphabetic", "ideographic", "bottom"].includes(value) }
// default: () => 'alphabetic'
textBaseline: 'top',
// The rotation angle, clockwise in radians
//
// type: Number
// required: false
rotate: 45
}
},
saveAs: {
type: String,
validator: (value: string) => {
return ['jpeg', 'png'].indexOf(value) !== -1
},
default: () => 'png'
},
canvasId: {
type: String,
default: () => 'VueDrawingCanvas'
}
initialImage: {
type: Array,
default: () => []
}4. API methods.
// Get x-axis and y-axis coordinates from current canvas getCoordinates(event) // Get all strokes getAllStrokes() // Reset reset() // Undo undo() // Redo redo() // Redraw redraw() // Check if is empty isEmpty()
Preview:
Changelog:
v1.0.8 (01/14/2022)
- BUG FIX not working on drawing tablet and stylus
v1.0.7 (12/22/2021)
- Added initialImage with getAllStrokes method
Download Details:
Author: razztyfication
Live Demo: https://codesandbox.io/s/vue-3-drawing-canvas-demo-ihmmz
Download Link: https://github.com/razztyfication/vue-drawing-canvas/archive/refs/heads/master.zip
Official Website: https://github.com/razztyfication/vue-drawing-canvas
Install & Download:
# VUE 3
$ npm i vue-drawing-canvas
# VUE 2
$ npm i vue-drawing-canvas @vue/composition-api