image-sketchpad

Image Sketchpad (responsive)

Draw on any image inside your desktop or mobile browser.

• Get image with sketches as base64 string
  • or download it as PNG
• Get sketches as JSON data
  • With it you can (re)load sketches, without saving a second image
  • No matter at which image size the data was generated
  • For example you can load the same sketches on a bigger version of the image, only ratio has to be the same
  • Load by method or data-sketchpad-json attribute
• Set stroke options like line width or color
• It works responsive, try it: draw on the image and resize the browser so the image will be smaller, so your sketch will be too.

---

1. - It works responsive, try it: draw on the image and resize the browser so the image will be smaller, so your sketch will be too.
2. Demo
3. Install
4. Usage
   1. Browser: VanillaJS
5. Options
6. Methods
   1. setOptions( options )
   2. enable()
   3. disable()
   4. toJson()
   5. loadJson( json )
   6. clear()
   7. undo()
   8. redo()
   9. mergeImageWithSketch(originalSize = true)
   10. download(originalSize = true)
   11. version()
7. Documentation
8. ToDo

---

Demo

You can see a working example online: DEMO

Install

npm install image-sketchpad --save

# yarn add image-sketchpad

Usage

I have included different files for different usages

Browser: VanillaJS

First include the JS file at the bottom of your html page

    <script src="image-sketchpad.min.js"></script>
  </body>
</html>

Second initialize the sketchpad and bind it to an image

    <img src="..." id="Image" />

    <script src="image-sketchpad.min.js"></script>
    <script>
        var img = document.getElementById('Image');
        var sketchpadOptions = {};
        var sketchPad = ImageSketchpad(img, sketchpadOptions);
    </script>
  </body>
</html>

That's it!

Options

Name	Type	Default	Description
lineWidth	int	5	Set the sketch line width
lineMaxWidth	int	-1	Set the maximum line width, no matter which image ratio we have. -1 = no max width. _Mostly needed if you draw on zoomed images
lineColor	string	#000	Line color as hex value
lineCap	enum(butt|round|square)	round	Canvas line cap
lineJoin	enum(round|bevel|miter)	round	Canvas line join
lineMiterLimit	int	10	Line miter limit

You can set sketchpad options on init or with the ImageSketchpad.setOptions(options) method.

Methods

After initialization you can always get the same instance by calling ImageSketchpad(el, opts) again on the same element. With this instance the following methods are available:

---

setOptions( options )

Set sketchpad options after initialization.

Param	Type	Default	Description
options	UserOptions		Sketchpad options

Return: ImageSketchpad

---

enable()

Enable sketching

Return: ImageSketchpad

---

disable()

Disable sketching

Return: ImageSketchpad

---

toJson()

Get sketch as JSON string.

Return: string

---

loadJson( json )

Load sketch from JSON string.

Param	Type	Default	Description
json	string		Sketch data as json string

Return: ImageSketchpad

---

clear()

Clear the sketchpad.

Return: ImageSketchpad

---

undo()

Undo last sketch.

Return: ImageSketchpad

---

redo()

Redo undone sketch.

Return: ImageSketchpad

---

mergeImageWithSketch(originalSize = true)

Merge the sketchpad canvas with the image and return a promise with a base64 string.

Param	Type	Default	Description
originalSize	boolean	true	If set to false it will merge the image exactly to the size like you see the image in the browser

Return: _Promise<string>__

---

download(originalSize = true)

Download the image you'll get with ImageSketchpad.mergeImageWithSketch() directly.

Param	Type	Default	Description
originalSize	boolean	true	If set to false it will download the image exactly with the size like you see the image in the browser

Return: ImageSketchpad

---

version()

Returns the package version (all libraries, components, modules should have something like this..).

Return: ImageSketchpad

---

Documentation

For the very interested: DOCUMENTATION

ToDo

• Test with some kind like electron
• Write e2e tests
• Do not force PNG as image output format
• Better documentation/readme
• Add DEMO to github pages/typedoc https://csoellinger.github.io/image-sketchpad/#demo

Changelog

1.0.2 (2021-12-02)

Full Changelog