README

Vue Drawingboard

A Vue wrapper component for drawingboard.js

Based on Leimi's Drawingboard.js on GitHub: https://github.com/Leimi/drawingboard.js

Simple use

<div id="app">
  <drawing-board-vue board-id="mydrawingboard"></drawing-board-vue>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script>

import { DrawingBoardVue } from 'vue-drawingboard'
new Vue({
  components: {
    DrawingBoardVue
  }
  el: '#app',
});

</script>

Props

boardId: [required, string] sets the canvas' ID
color: [string] sets the color of the brush. Can be just in the form of hex value (#ffffff) or rgba value written as rgba(0, 0, 0, 1). DEFAULT: rgba(0, 0, 0, 1)
size: [number] sets the size of the brush. DEFAULT: 6
height: [string] sets the height of the board. It has to be written has a number, followed by the unit; for example 600px or 40rem. DEFAULT: 400px
width: [string] sets the width of the board. It has to be written has a number, followed by the unit; for example 600px or 40rem. DEFAULT: 600px

V-Model

By setting a v-model, the board will act like an input field that returns the image displayed in the canvas.

Methods

There are some useful methods that you should use from the outside to help you develop your drawingboard:

useEreaser(): tells the board to use a white brush. It doesn't override the color that was set through the prop.
useBrush(): tells the board to use a brush with the color set in the color prop.

Using the two methods above, you can switch from ereaser to brush without having to select a white brush manually.

clearBoard(): tells the board to reset its background to white.

Events

drawing: the component emits this event when someone is drawing on the canvas.
cleared: the component emits this event when the board has been cleared.

Cloudinary.js

Cloudinary.js is an utility library structured as a Promise, made to help you to connect to the cloudinary API. It provides only one method, the UPLOAD method.

import { cloudinary } from 'vue-drawingboard'

cloudinary.upload(your_image, your_cloudinary_cloudname, your_cloudinary_upload_preset);

upload() parameters

Required fields

file: [required, string] the image to send to cloudinary.
cloudName: [required, string] your cloudinary cloudname.
uploadPreset: [required, string] your cloudinary upload_preset field.

Not required fields:

tags: [array] Array of tags you might want to send with your picture.
metadata: [object] Object of metadata values you might want to send with your picture. Check with the Cloudinary API Reference what your keys might be. For example:

 {
   'alt':     'This is the picture description field',
   'caption': 'This is the picture title field'
 }

@nodopiano/vue-drawingboard

Usage no npm install needed!