Code Monkey home page Code Monkey logo

easy-drawing-board's Introduction

easy-drawing-board

a easy to use drawing board lib ๐ŸŽจ

Installing

Using npm:

npm install easy-drawing-board

Using yarn:

yarn add easy-drawing-board

Using script tag

<script src="your_path/dist/easy-drawing-board.js"></script>

Play

live example

or

git clone this repository then open example/index.html in your browser

example1

example1

Usage

Initialize

<script type="text/javascript" src="//{you path to the dist file}/dist/easy-drawing-board.js"></script>
<style>.container { width: 500px; height: 500px; }</style>
<div class="container"></div>
// See below for document.
const options = {
  container: document.getElementsByClassName('container')[0]
}
// canvas's width/height equals container's width/height
const draw = new EasyDrawingBoard(options); 

Options

Options Type Default value Description
container HtmlDom (required) / Container for canvas
bgImg String Empty string Canvas background Image's url, if you needed.
canvasBgColor String #fff Canvas background Color
lineColor String #f00 Color of brush
lineWidth String / Number 1 Width of brush
arrowSize String / Number 15 Size of arrows
eraserSize String / Number 10 Size of eraser
textFontSize String / Number 16 Font size of the textArea
textLineHeight String / Number 20 Font lineheight of the textArea
textColor String #f00 Font color of the textArea

APIs

Method Arguments Description
config( type,val ) tpye's enum(lineColor, lineWidth, arrowSize, eraserSize, canvasBgColor, textFontSize, textLineHeight, textColor, bgImg) Modifying the default configuration
setMode( mode ) mode's enum(pencil, straightLine, rect, circle, arrow, eraser) Set current mode
saveImg( [options] ) default value { tpye: 'png', fileName: 'canvas_imgae' } Save the canvas as an image, and download.
generateBase64([type]) default value "png" Generate Base64 data
undo() / undo operation
clear() / Clear canvas

example

  // init
  import EasyDrawingBoard from 'easy-drawing-board'
  const container = document.getElementsByClassName('container')[0]
  const draw = new EasyDrawingBoard({container: container})

  // methods
  draw.conifg('lineColor', '#FF1493')                         // Change the color of the brush.
  draw.setMode('rect')                                        // Now you can draw the rectangle.

  draw.generateBase64().then(data => console.log(data))       // generateBase64 method default is to export the PNG base64 data.                              
  draw.generateBase64('jpeg').then(data => console.log(data)) // get smaller data.                          

  draw.saveImg()                                              // Save the canvas as an PNG images, and the file name is canvas_imgae.png.
  draw.saveImg({fileName: '233.png'})                         // Just Change of file name.
  draw.saveImg({tpye: 'jpeg', fileName: 'small.jpeg'})        // Sometimes we just need smaller pictures.

Todo

  • eraser
  • undo
  • typescript refactoring

License

MIT

easy-drawing-board's People

Contributors

dependabot[bot] avatar kaier33 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.